CSSで画像の伸縮を設定する方法

CSS で画像のストレッチを設定する方法: まず HTML ページを作成し、次に HTML ページに div タグを追加し、そのタグ内に img 画像タグを追加します。その後、div タグのスタイルに CSS を直接記述します。 ; 最後に画像の高さと幅を 100% に設定します。

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。

vscode を開いて HTML ページを作成し、CSS が解像度に応じて画像設定をどのように拡大するかを示します。 vscode がない場合は、他の HTML エディターまたはテキスト ファイルを使用できます。ただし、ファイルのサフィックスは同じレベルの .html

である必要があることに注意してください。テスト ページのディレクトリにデモンストレーション画像を追加します。効果を実証するために、画像の解像度は比較的低くしています。

テスト ページに div タグを追加します。タグ内に img 画像を追加し、画像の src アドレスを前の手順で追加したデモ画像に設定します。ブラウザでこのテスト ページを開くと、ブラウザ上に表示される画像が表示されます

div タグ内に CSS スタイルを直接記述し、div の幅を 500 ピクセル、高さを 300 ピクセル、境界線を 1 ピクセルの赤いボックスに設定します。ブラウザで再度開くと、div スペース全体を埋めていない画像が表示されます。

[推奨学習: css ビデオ チュートリアル ]

注:これは、インラインスタイルと呼ばれるCSSスタイルをタグ内に直接記述することで、外部にCSSを記述したのと同じ効果があります。画像を div 全体に埋め込むには、画像の高さと幅を 100% に設定するだけです。ここではデモンストレーションのため、imgタグをすべて100％にし、外部CSSの記述形式を使用しています。ブラウザの表示効果から、画像が引き伸ばされて div スペース全体を埋めることがわかります。

画像が背景画像を使用しており、フォーム内にない場合はどうなるでしょうか。 imgタグの??表示される場合、画像はデフォルトで x 軸と y 軸上で繰り返され、引き伸ばされません。それでもこの div のスペースを埋めます。 div スペース全体を埋めるように引き伸ばすには、背景イメージの背景サイズを設定する必要があります: 100% 100%; 実行中のエフェクトからわかるように、解決策は実際に達成されています

以上がCSSで画像の伸縮を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。