HTMLで画像サイズを設定する方法-htmlチュートリアル-php.cn

HTMLで画像サイズを設定する方法

青灯夜游

リリース： 2021-05-20 11:38:16

オリジナル

34504 人が閲覧しました

方法: 1. img タグの幅と高さの属性、構文 ""; を使用します。 CSS の幅と高さの属性、構文「img{幅: 値; 高さ: 値}」を使用します。

HTMLで画像サイズを設定する方法

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

#方法 1: img タグの width 属性と height 属性を使用する## HTMLで画像サイズを設定する方法タグの height 属性と width 属性は、画像のサイズ。

<img  src="img/1.jpg"    style="max-width:90%"  style="max-width:90%"/ alt="HTMLで画像サイズを設定する方法" >

ログイン後にコピー

HTMLで画像サイズを設定する方法

高さと幅の属性を使用する理由

ドキュメントの読み込み時にコンテンツが不規則に表示されるのを見たことがありますか?動く。これは、読み込まれた各画像を表示できるようにするために、ブラウザが常にページを再レイアウトしているために発生します。ブラウザは、画像の幅と高さをダウンロードして解析することによって画像のサイズを決定し、表示ウィンドウ内に対応する長方形のスペースを残します。次に、ブラウザはページの表示レイアウトを調整して、画像を表示に挿入します。これは、イメージが独立したファイルであり、ソースファイルとは独立してロードされることも示しています。

しかし、これはドキュメントを表示する最も効率的な方法ではありません。ブラウザは、隣接するドキュメントコンテンツや後続のドキュメントコンテンツを表示する前に、各画像ファイルをチェックして画面スペースを計算する必要があるからです。これにより、ドキュメントの表示に非常に大きな遅延が発生し、ユーザーの読書が中断される可能性があります。

作成者にとってより効率的な方法は、 HTMLで画像サイズを設定する方法タグの高さと幅の属性を使用して画像の寸法を指定することです。この場合、ブラウザは画像をダウンロードする前に画像の場所を予約するため、ドキュメントの表示が高速化され、ドキュメントのコンテンツの移動が防止されます。どちらのプロパティも整数値である必要があり、画像の寸法をピクセル単位で表す必要があります。これら 2 つの属性が HTMLで画像サイズを設定する方法タグ内に現れる順序は重要ではありません。

高さと幅の属性に関する問題

HTMLで画像サイズを設定する方法タグの高さと幅の属性を使用するとパフォーマンスが向上し、いくつかのトリックを実装できるようになりますが、次のような問題があります。使用時の問題まだ厄介なマイナス効果がいくつかあります。ユーザーが画像の自動ダウンロードをオフにしても、ブラウザは画像用に予約されたスペースを指定されたサイズで表示する必要があります。これにより読者に残るのは、通常、ここに画像を配置する必要があることを示す意味のないアイコンが付いた空のフレームです。この時点で、ページはまったく完成していないように非常に悪くなり、コンテンツのほとんどは役に立たなくなります。これらの指定されたサイズを使用しない場合、ブラウザーはテキスト内にイメージアイコンを配置するだけで、少なくとも一部のテキストはディスプレイ内で読み取れるようになります。

推奨チュートリアル: 「

html ビデオチュートリアル

」

方法 2: css

width の幅と高さの属性を使用する属性は要素の幅を設定し、高さ属性は要素の高さを設定します。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			img{
				width:200px ;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<img  src="img/1.jpg"/ alt="HTMLで画像サイズを設定する方法" >
	</body>
</html>

ログイン後にコピー

HTMLで画像サイズを設定する方法プログラミング関連の知識については、