HTML IMG etiketi kullanılarak en boy oranı nasıl korunur?

Uygulamamızda bir fotoğrafı göstermek için bir HTML img etiketi kullanıyorum. Hem yükseklik hem de genişlik özniteliğini 64 olarak ayarladım. Herhangi bir görüntü çözünürlüğünü (ör. 256x256, 1024x768, 500x400, 205x246, vb.) 64x64 olarak göstermem gerekiyor. Ancak bir img etiketinin yükseklik ve genişlik niteliklerini 64 olarak ayarladığınızda, en boy oranını korumaz, dolayısıyla görüntü bozuk görünür.

Referansınız için tam kodum:

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

Yükseklik VE genişliği ayarlamayın. Birini veya diğerini kullanın ve doğru en boy oranı korunacaktır.

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

işte örnek olan

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>

Set widthve heightgörüntülerin etmek auto, ancak sınır hem max-widthve max-height:

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

Vaktini boşa harcamak

64x64 piksellik "çerçevelerde" rasgele boyuttaki resimleri görüntülemek istiyorsanız , bu keman gibi satır içi blok sarmalayıcıları ve konumlandırmayı kullanabilirsiniz .

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

Listelenen yöntemlerden hiçbiri, istenen en boy oranını korurken görüntüyü bir kutuya sığan olası en büyük boyuta ölçeklendirmez.

Bu, IMG etiketiyle yapılamaz (en azından biraz JavaScript olmadan), ancak şu şekilde yapılabilir:

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

object-fit: containHtml'nin css'sinde özniteliği kullanın img.

Görüntüyü div64x64 boyutlarında bir boyuta sarın ve görüntüye ayarlayın width: inherit:

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

Görüntülemek istediğiniz görüntünün yüksekliğini ve genişliğini korumak için neden ayrı bir CSS dosyası kullanmıyorsunuz? Bu sayede mutlaka genişlik ve yüksekliği sağlayabilirsiniz.

Örneğin:

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

Bunu dene:

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

Object-fit = "cover" eklemek, görüntüyü en boy oranını kaybetmeden alanı kaplamaya zorlar.