ホームページ >ウェブフロントエンド >htmlチュートリアル >HTMLで画像サイズを設定する方法
HTMLで画像サイズを設定する方法
- 青灯夜游オリジナル
- 2021-05-06 14:48:4934501ブラウズ
方法: 1. img タグの幅と高さの属性、構文 "
"; を使用します。 CSS の幅と高さの属性、構文「img{幅: 値; 高さ: 値}」を使用します。
このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。
#方法 1: img タグの width 属性と height 属性を使用する## タグの height 属性と width 属性は、画像のサイズ。
<img src="img/1.jpg" style="max-width:90%" style="max-width:90%"/ alt="HTMLで画像サイズを設定する方法" >
ドキュメントの読み込み時にコンテンツが不規則に表示されるのを見たことがありますか?動く。これは、読み込まれた各画像を表示できるようにするために、ブラウザが常にページを再レイアウトしているために発生します。ブラウザは、画像の幅と高さをダウンロードして解析することによって画像のサイズを決定し、表示ウィンドウ内に対応する長方形のスペースを残します。次に、ブラウザはページの表示レイアウトを調整して、画像を表示に挿入します。これは、イメージが独立したファイルであり、ソース ファイルとは独立してロードされることも示しています。
しかし、これはドキュメントを表示する最も効率的な方法ではありません。ブラウザは、隣接するドキュメント コンテンツや後続のドキュメント コンテンツを表示する前に、各画像ファイルをチェックして画面スペースを計算する必要があるからです。これにより、ドキュメントの表示に非常に大きな遅延が発生し、ユーザーの読書が中断される可能性があります。
作成者にとってより効率的な方法は、 タグの高さと幅の属性を使用して画像の寸法を指定することです。この場合、ブラウザは画像をダウンロードする前に画像の場所を予約するため、ドキュメントの表示が高速化され、ドキュメントのコンテンツの移動が防止されます。どちらのプロパティも整数値である必要があり、画像の寸法をピクセル単位で表す必要があります。これら 2 つの属性が
タグ内に現れる順序は重要ではありません。
タグの高さと幅の属性を使用するとパフォーマンスが向上し、いくつかのトリックを実装できるようになりますが、次のような問題があります。使用時の問題 まだ厄介なマイナス効果がいくつかあります。ユーザーが画像の自動ダウンロードをオフにしても、ブラウザは画像用に予約されたスペースを指定されたサイズで表示する必要があります。これにより読者に残るのは、通常、ここに画像を配置する必要があることを示す意味のないアイコンが付いた空のフレームです。この時点で、ページはまったく完成していないように非常に悪くなり、コンテンツのほとんどは役に立たなくなります。これらの指定されたサイズを使用しない場合、ブラウザーはテキスト内にイメージ アイコンを配置するだけで、少なくとも一部のテキストはディスプレイ内で読み取れるようになります。
推奨チュートリアル: 「
html ビデオ チュートリアル 方法 2: csswidth の幅と高さの属性を使用する属性は要素の幅を設定し、高さ属性は要素の高さを設定します。
<!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で画像サイズを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。