Как показать полный снимок в div

Я хочу показать полное изображение независимо от его размеров в div. Размеры div: Ширина: 400 пикселей и Высота: 400 пикселей [400x400]. Поэтому, даже если изображение больше, чем div, я хочу, чтобы все изображение отображалось в div. изображение должно поддерживать соотношение сторон. Как я могу достичь этого с помощью CSS или jQuery? Возможно ли это без манипулирования изображением с помощью PHP или любого другого скрипта?Как показать полный снимок в div

[Извините за грамматические и плохой английский]

источник

2017-02-11 Somename

Итак, вы хотите, чтобы div расширялся с изображением или? –

Извините. Нет. Div должен оставаться статичным. Изображение должно корректироваться в соответствии с div. Я могу получить изображение, чтобы заполнить 100% ширины и больше не идти по ширине, но если изображение больше по высоте, высота div увеличивается. Я хочу, чтобы div был статичным и не изменялся в соответствии с изображением. – Somename

Если добавить его в качестве фона вы можете добавить:
background-size: contain;

Если вы используете img теги, а затем:
object-fit: contain;

Для лучшей совместимости со старыми браузерами вы должны использовать фоновый метод.

Edit:
Просто хотел поставить это здесь, в случае, если кто-то нуждается в этом:

Нет объекта посадки: https://jsfiddle.net/ke8yu22d/
С объектно-FIT: https://jsfiddle.net/yf5psqyL/ В качестве фона: https://jsfiddle.net/vqy316L6/

источник

2017-02-11 21:59:24 pol

Спасибо, друг. – Somename

Как показать полный снимок в div

ответ

Смежные вопросы