Як підтримувати співвідношення сторін за допомогою тегу HTML IMG

Я використовую тег img HTML для показу фотографії в нашому додатку. Я встановив атрибут висоти та ширини як 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: containатрибут in у css html img.

Оберніть зображення у divрозмірі 64x64 та встановіть 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" змусить зображення зайняти простір, не втрачаючи співвідношення сторін.