175

アプリケーションで写真を表示するために HTML の img タグを使用しています。高さと幅の両方の属性を 64 に設定しました。画像の解像度 (256x256、1024x768、500x400、205x246 など) を 64x64 として表示する必要があります。ただし、img タグの高さと幅の属性を 64 に設定すると、縦横比が維持されないため、画像がゆがんで見えます。

参考までに、私の正確なコードは次のとおりです。

<img src="Runtime Path to photo" border="1" height="64" width="64">
4

14 に答える 14

149

高さと幅を設定しないでください。どちらかを使用すると、正しい縦横比が維持されます。

.widthSet {
    max-width: 64px;
}

.heightSet {
    max-height: 64px;
}
<img src="http://placehold.it/200x250" />

<img src="http://placehold.it/200x250" width="64" />

<img src="http://placehold.it/200x250" height="64" />

<img src="http://placehold.it/200x250" class="widthSet" />

<img src="http://placehold.it/200x250" class="heightSet" />

于 2012-10-16T10:06:26.773 に答える
57

画像のwidthとを に設定しますが、 と の両方を制限します。heightautomax-widthmax-height

img {
    max-width:64px;
    max-height:64px;
    width:auto;
    height:auto;
}

フィドル

64x64px の「フレーム」に任意のサイズの画像を表示したい場合は、この fiddle のように、インライン ブロック ラッパーとそれらの配置を使用できます。

于 2013-07-29T01:08:57.533 に答える
23

object-fit: containhtml 要素の css で使用しますimg。

元：

img {
    ...
    object-fit: contain
    ...
}
于 2020-01-04T08:53:09.677 に答える
14

リストされている方法のいずれも、目的の縦横比を維持しながら、ボックスに収まる可能な最大サイズに画像をスケーリングしません。

これは IMG タグを使用して行うことはできません (少なくとも JavaScript を少し使わないとできません) が、次のように行うことができます。

 <div style="background:center no-repeat url(...);background-size:contain;width:...;height:..."></div>
于 2013-11-29T18:21:48.870 に答える
7

div画像を64x64の寸法でラップし、画像に設定width: inheritします。 

<div style="width: 64px; height: 64px;">
    <img src="Runtime path" style="width: inherit" />
</div>
于 2012-10-16T10:04:30.363 に答える
6

新しい CSS プロパティ がありますaspect-ratio。ボックスの優先縦横比を設定します。これは、自動サイズの計算やその他のレイアウト関数で使用されます。

img {
  width: 100%;
  aspect-ratio: 16/9;
}

普及しているすべてのブラウザでサポートされています。
MDN リンク: https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
およびhttps://web.dev/aspect-ratio/には、そのプロパティの使用例が含まれています

于 2021-03-13T21:10:33.090 に答える
1

別の CSS ファイルを使用して、表示したい画像の高さと幅を維持してみませんか? このようにして、必要に応じて幅と高さを指定できます。

例えば： 

       image {
       width: 64px;
       height: 64px;
       }
于 2012-10-16T10:10:49.673 に答える