ホームページ > 記事 > ウェブフロントエンド > HTML画像を比例的に拡大縮小するにはどうすればよいですか? html img 画像の拡大縮小方法のまとめ (例付き)
HTML画像を比例的に拡大縮小するにはどうすればよいですか? html img 画像の拡大縮小方法のまとめ (例付き)
- 寻∝梦オリジナル
- 2018-09-01 16:12:5637259ブラウズ
この記事では、html imgタグ画像の等倍拡大の紹介と使用例を中心に紹介します 最後に、html imgタグ画像の等倍拡大についてまとめています
まずは、こちらの記事を読んでいきましょう。 HTML 画像を均等な比率で拡大縮小する方法を見てください:
画像リストまたは画像レイアウトの DIV CSS レイアウトでは、画像の幅と高さは固定ではありませんが、画像のプレースホルダーは固定の幅と高さです。 CSS を使用すると画像のサイズ (幅と高さ) が固定されます。このとき、画像のサイズがこの位置に対して比例していないと、画像が変形してしまい、画像が不鮮明になります。画像が変形し、比例して拡大縮小する方法を教えてください。 CSS画像は変形せずに縮小したり、自動で縮小したり、変形せずに比例縮小したりすることができます。
HTML img タグの画像のスケーリングには 2 つの解決策があります:
まず、画像とレイアウトの幅と高さを比例させます。これにより、CSS がデッド幅と高さを設定し、画像も縮小され、画像が変形しません。
たとえば、淘宝網では、ストアオーナーが正方形の製品カバー写真をアップロードする必要があります。これは、写真の赤ちゃんの表示リストが正方形のレイアウトになっているため、写真が変形しないように、適切な正方形の赤ちゃんカバー写真をアップロードする必要があるためです。
そのため、可能であれば、ホームページと写真一覧ページのレイアウトの幅と高さを一定に保つ必要があります。写真をアップロードするときは、レイアウトの幅と高さが同じ比率で拡大されるように、最初に写真を処理する必要があります。
2. CSS の max-width と max-height を使用して、画像を自動的に比例的に縮小します。
max-width と max-height を使用して、画像の最大幅と最大高さを設定するのは非常に簡単です。画像は比例的に拡大縮小されますが、画像は比較的変形せず、鮮明になります。
次の DIVCSS5 では、サンプルの比較方法を使用して、誰もが CSS コントロールの画像縮小および非変形テクニックを習得できるようにします。
次に、HTML img 画像のスケーリングに関するケースを見てみましょう:
DIV ボックス (「tupian」という名前の DIV クラス) があります。CSS の幅と CSS の高さは 300 ピクセルと 100 ピクセル、そして 1 ピクセルの黒い境界線です。中に画像が設定されています（画像の元の幅は650px、高さは406pxです）。そしてCSSを通じて画像の幅と高さを固定します。
HTML imgタグの画像を拡大縮小するためのすべてのコード:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片缩小不变形实例 www.php.cn</title>
<style>
.tupian{ border:1px solid #000; width:300px; height:100px}
.tupian img{width:300px; height:100px}
</style>
</head>
<body>
<div class="tupian">
<img src="img.jpg" />
</div>
</body>
</html>画像が配置されていないため、コードは効果を表示しません。そのため、自分で理解できます。
CSS を介してオブジェクト内の画像の高さと幅を固定します。画像が比例して縮小されない場合、画像が変形します。
前に述べたことはほぼ同じですが、まずは要約から始めましょう:
CSS DIV 画像は変形せずに縮小できます。 要約: 最良の解決策は、画像自体のデザインから始めてデザインすることです。画像をレイアウトの幅と高さに比例させます。たとえば、画像をレイアウトするときは幅が 300px、高さが 200px になります。次に、画像素材をデザインするときに、画像の幅と高さを入力します。幅 600 ピクセル、高さ 400 ピクセル、または幅 900 ピクセル、高さ 600 ピクセルの画像を実際に縮小することができ、変形することなく表示が完了します。
【編集者のおすすめ】
HTMLフォントタグのフォントサイズを設定するには？ HTMLのフォントタグ属性の使い方を紹介
HTMLに画像を追加するコードとは？ HTMLに画像パスを正しく追加するにはどうすればよいですか?
以上がHTML画像を比例的に拡大縮小するにはどうすればよいですか? html img 画像の拡大縮小方法のまとめ (例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。