HTML IMGタグを使用してアスペクト比を維持する方法

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

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

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

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

.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" />

こちらがサンプルです

div{
   width: 200px;
   height:200px;
   border:solid
 }

img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    }

<div>
  <img src="https://upload.wikimedia.org/wikipedia/meta/0/08/Wikipedia-logo-v2_1x.png">
</div>

widthおよびheightの画像をに設定しますが、およびのauto両方max-widthを制限しますmax-height。

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

フィドル

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

<img src="Runtime Path to photo"
     style="border: 1px solid #000; max-width:64px; max-height:64px;">

リストされている方法はどれも、希望のアスペクト比を維持しながら、ボックスに収まる最大サイズに画像を拡大縮小しません。

これはIMGタグでは実行できません（少なくともJavaScriptを使用しない限り）が、次のように実行できます。

 <div style="background:center no-repeat url(...);background-size:contain;width:...;height:..."></div>

object-fit: containhtmlのcssで属性を使用しますimg。

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

<div style="width: 64px; height: 64px;">
    <img src="Runtime path" style="width: inherit" />
</div>

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

例えば：

       image {
       width: 64px;
       height: 64px;
       }

これを試して：

<img src="Runtime Path to photo" border="1" height="64" width="64" object-fit="cover">

object-fit = "cover"を追加すると、アスペクト比を失わずに画像がスペースを占有します。