HTMLで画像サイズを変更する方法

html画像サイズを変更する方法: まず HTML サンプル ファイルを作成し、次に img を使用して画像を作成し、最後に高さと幅の属性を使用して画像のサイズを設定します。

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

html画像サイズを変更するにはどうすればよいですか?

タグの高さと幅の属性は、画像の寸法を設定します。

ヒント: 画像の高さと幅の属性を指定することをお勧めします。これらのプロパティを設定すると、ページの読み込み時に画像用のスペースを予約できます。これらの属性がないと、ブラウザーは画像のサイズを理解できず、画像に適切なスペースを確保できないため、画像が読み込まれるときにページのレイアウトが変更されます。 (このアイデアについては以下で詳しく説明します)。

ヒント: 高さと幅の属性を使用して画像を拡大縮小しないでください。高さと幅の属性によって画像が縮小された場合、ユーザーは (ページ上で画像が小さく見えても) より大きな画像をダウンロードする必要があります。正しいアプローチは、Web ページで画像を使用する前に、ソフトウェアを使用して画像を適切なサイズに処理することです。

画像サイズの変更 - 塗りつぶされた画像の作成

高さと幅のプロパティには、画像の実際のサイズを指定する必要のない隠しプロパティがあります。つまり、これら 2 つの値です。値は実際のサイズより大きくても小さくても構いません。ブラウザは、この予約されたスペースに収まるように画像のサイズを自動的に変更します。この方法を使用すると、大きな画像のサムネイルを簡単に作成したり、非常に小さな画像を拡大したりすることができます。ただし、最終的な表示サイズに関係なく、ブラウザはファイル全体をダウンロードする必要があるため、元の幅と高さの比率が維持されない場合は画像が歪むことに注意してください。

高さと幅の属性を使用するもう 1 つのテクニックは、ページ領域を埋めることを非常に簡単にしながら、ドキュメントのパフォーマンスも向上させることです。ドキュメントに色付きの水平バーを配置したい場合を想像してください。フルサイズの画像を作成する必要はありません。代わりに、幅 1 ピクセル、高さ 1 ピクセルの画像を作成し、それに使用する色を指定します。次に、高さと幅のプロパティを使用して、より大きなサイズに拡張します。

<img  src="/static/imghw/default1.png"  data-src="/i/ct_1px.gif"  class="lazy"      style="max-width:90%" height="30px" / alt="HTMLで画像サイズを変更する方法" >

これは上記の HTML の効果です。このカラー バーは 1 ピクセルのみの画像から作成されています:

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