Установить максимальный размер изображения

Question

Мне нужно установить максимальную высоту и ширину изображения в теге <img>.Например, допустим, что максимальный размер равен 400x400 пикселей, поэтому, если размер изображения меньше этого, он будет отображать изображение таким, как оно есть, а если размер больше этого, то его следует сжать до этого размера.Как я могу сделать это в html или javascript?

Answer 1

Установите max-width и max-height в CSS

max-width: 400px;
max-height: 400px;

Answer 2

попробуйте использовать тег div этого размера и поместить изображение внутрь:

<div style="width:400px; height400px;>

  <img style="text-align:center; vertical-align:middle; max-width:400px;  max-height:400px;" />

</div>

или что-то в этом роде. Div - полный размер, и изображение может расширяться только до его границ.

Answer 3

Вы также можете использовать object-fit: scale-down, чтобы изображение соответствовало размеру контейнера, если оно слишком большое, и оставить размер изображения таким, как он есть, если он меньше контейнера.* HTML:

<div style="width: 400px;">
   <img src="myimage.jpg" class="img-scale-down"/>
</div>

Answer 4

img
{
    max-width: 400px;
    max-height: 400px;
}

Вот так: http://jsfiddle.net/fMuVw/

Answer 5

Как я это сделал:

• Когда изображение загружается, я использую библиотеку на стороне сервера для изменения размера, если изображение больше (только). Вы всегда уменьшаете размер, никогда не увеличиваете.
• Тогда на стороне клиента я не устанавливаю размер изображения.

Изображение будет 400x400 только для тех изображений, которые были именно этого размера или больше.