Как сохранить соотношение сторон с помощью тега HTML IMG

132

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

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

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

html css

— Сунил Кумар
источник

возможный дубликат HTML / IE: растянуть изображение по размеру, сохранить соотношение сторон

— Джонатон Рейнхарт,

Chridam, давно уже задавал этот вопрос. Я ушел из той компании, в которой работал над этим вопросом. Я не мог попробовать предлагаемые решения, потому что тогда я работал над другими приоритетами, чтобы уложиться в сроки. У меня не было шанса добиться в этом дальнейшего прогресса.

— сунил кумар

134

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

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

Развернуть фрагмент

— репа
источник

14

... но что, если вы хотите исправить и высоту, и ширину?

— fatuhoku 07

7

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

— Кенигсберг

@ Mär Этот вопрос касался изображений с фиксированной шириной и / или высотой. Отзывчивость не была требованием вопроса.

— Репа

3

Размер фиксированный, соотношение сторон - нет, так как речь шла конкретно о любом изображении любого разрешения. Включая разрешения меньше 64х64.

— Кенигсберг

66

вот образец

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>

Развернуть фрагмент

— АХИЛ П
источник

8

Просто замечание для людей, которые хотят использовать это решение: соответствие объектам не очень хорошо поддерживается браузерами. Он вообще не поддерживается IE или Edge. Источник: caniuse.com/#feat=object-fit

— Шон Доусон

2

Теперь поддерживается Edge 16+, см. Таблицу: w3schools.com/css/css3_object-fit.asp

— Эдди Р.

45

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

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

скрипка

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

— Илья Стрельцын
источник

3

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

— Кенигсберг

40

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

— Лусио Фонсека
источник

2

Это правильное решение, поскольку оно по-прежнему не зависит от ориентации изображения. Решение 3rror404 требует, чтобы вы знали, является ли изображение шире, чем оно, или наоборот.

— devios1 05

2

также установите widthи heightна auto.

— Mahmoodvcs 05

Правильное решение для ограничения высоты и ширины.

— Паван Кумар

1

Изображение будет правильно ограничено этим, но не масштабируется сверх исходного размера. Хотя из вводного поста неясно, какой из двух OP хотел.

— Кенигсберг

14

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

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

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

— Анонимный трус
источник

2

Да. Используйте style="background: url('_'); background-size: cover width:_px height:_px"для <img>тега.

— Удджвал Сингх

3

Спасибо, @UjjwalSingh. Действительно, нам coverне нужно containдля того, чтобы максимально увеличивать размер изображения. containприводит к "почтовому ящику".

— Ортвин Генц

4

Используйте object-fit: containатрибут в css html img.

— Анкит Кумар Верма
источник

3

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

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

— Константин Динев
источник

1

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

например:

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

— Сахан Де Силва
источник

1

Попробуй это:

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

Добавление object-fit = "cover" заставит изображение занять пространство без потери соотношения сторон.

— Ник Фризен
источник