純粋な CSS を使用して画像をクリックして拡大する方法を実現する方法

画像をクリックして拡大するための純粋な CSS メソッド: 1. HTML サンプル ファイルを作成します; 2. "

"; 3. 「function showBgImg(e) {...}」メソッドを使用して、画像をクリックすると拡大します。

このチュートリアルの動作環境: Windows 10 システム、HTML5&&CSS3 バージョン、DELL G3 コンピューター

純粋な CSS を使用して画像をクリックすると拡大しますか？

CSS の実際のトレーニング画像、クリックして拡大

I. 背景

これは非常に一般的な関数であり、通常は Web サイトに表示されますサムネイルです。サムネイルをクリックすると、ポップアップ ボックスに拡大された画像が表示されます。

では、この機能はどのように実装されているのでしょうか? CSS の基礎知識を学んだばかりですが、今では次のことができます。実際の操作

1. アイデア

最初にページの構造を分割します:

• 大きな画像を表示するポップアップ ウィンドウがあります。ポップアップ ウィンドウ; ポップアップ ウィンドウはデフォルトでは非表示になっています
• メイン ページに多くの画像を配置し、クリック イベントを追加できます
• クリック後、ポップアップ ウィンドウが表示され、大きな画像が表示されます
• 大きな画像をクリック以下の操作が完了したら、ポップアップ ウィンドウを閉じます

II. 実装

上記の説明に従って、まず基本バージョンを実装し、最初に HTML

を記述します。次に、対応するスタイルを追加します。これには、デフォルトでモーダルを非表示にする必要があります。次のようにします (ポップを区別しやすくするため)。ウィンドウを開くと、背景色と境界線が追加されます)

次のステップは、js を使用して実装された大きな画像を表示するロジックをクリックすることです。

# は期待していたポップアップ効果ではありません オリジナルの画像は縮小されています
ポップアップウィンドウに拡大アニメーション効果があればもっと良いです（以前学習したアニメーションを使用するだけで十分です）
• ##画像内に画像が多い場合、クリックして拡大する方法
III. 高度な

まず、既存のレイアウトに影響を与えずに実際のポップアップ ウィンドウにしたい場合は、通常、私たちが行うように位置を設定することでそれを行います。モーダルの外側に別のレイヤーを追加すると、

• 背景色を削除し、影を追加し、白い境界線を追加します
変更した CSS は次のとおりです

.modal { display: none; margin: auto; padding-top: 5%; width: 50%; height: 80%; z-index: 1; background-color: white; } .modal img { display: block; padding: 10px; margin: auto; max-width: 100%; max-height: 100%; box-shadow: 0 2px 6px rgb(0, 0, 0, 0.2), 0 10px 20px rgb(0, 0, 0, 0.2); border-radius: 12px; border: 1px solid white; }

@keyframes zoom { from {transform: scale(0.1)} to {transform: scale(1)} } .modal img { animation-name: zoom; animation-duration: 0.6s; }

#次のステップは、これを複数の画像をサポートする汎用ソリューションに変えることです。これは主に画像クリック イベントの変更です。ハードウェアにいくつかの変更を加えるだけです。上記のコード部分

IV. ソース コード

#

"