Как поддерживать соотношение сторон с помощью HTML IMG-тега

Я использую тег img HTML, чтобы показать фотографию в нашем приложении. Я установил для атрибута высоты и ширины значение 64. Мне нужно показать любое разрешение изображения (например, 256x256, 1024x768, 500x400, 205x246 и т.д.) Как 64x64. Но установив атрибуты высоты и ширины тега img на 64, он не поддерживает соотношение сторон, поэтому изображение выглядит искаженным.

Для справки мой точный код:

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

Ответ 1

Не устанавливайте высоту и ширину. Используйте одно или другое, и правильное соотношение сторон будет сохранено.

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

Ответ 2

вот образец один

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>

Ответ 3

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

Ответ 4

Установите width и height изображения на auto, но ограничьте как max-width, так и max-height:

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

Fiddle

Если вы хотите отображать изображения произвольного размера в 64x64px "фреймах", вы можете использовать обертки inline-блока и позиционирование для них, например в этой скрипке.

Ответ 5

Ни один из перечисленных методов не масштабирует изображение до максимально возможного размера, который помещается в поле, сохраняя требуемое соотношение сторон.

Это невозможно сделать с тегом IMG (по крайней мере, не без бит JavaScript), но это можно сделать следующим образом:

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

Ответ 6

Оберните изображение в div с размерами 64x64 и установите width: inherit на изображение:

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

Ответ 7

Почему бы вам не использовать отдельный файл CSS для поддержания высоты и ширины изображения, которое вы хотите отобразить? Таким образом, вы можете обеспечить ширину и высоту обязательно.

например:

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