Как сделать, чтобы изображение в блоке всегда помещалось без полей?

Question

[Mixa]

Делаю сайт на bootstrap, используя готовый шаблон.

В нем есть блоки, где картинка слева, а текст справа. В полной версии, благодаря свойству background-size: cover получаю изображение в кропнутом виде. А хотелось бы полностью его. Но когда свойство на contain, то и в полной, и в мобильной версии получаю лишнее пространство вокруг картинки.

Пример: kreozot.com/test/copy-index.html (Первый блок - cover, второй - contain.) Как добиться отображения в мобильной версии без полей? Самое интересное, что есть такие же блоки, только наоборот - там картинка справа, и в мобильной версии с ними нет данной траблы...

Answer 1

[Flying]

Собственно ответ "никак" и он обусловлен не особенностями или ограничениями CSS, а вашей формулировкой задачи. Фактически вы хотите чтобы картинка (имеющая определённые пропорции) помещалась полностью и без полей в блок с неопредлёнными пропорциями. Это, очевидно, возможно только в случае если пропорции картинки и блока совпадают что противоречит условиям вашей задачи.

Comments

[Mixa]

т. е. невозможно сделать так. чтобы правый блок (который с текстом) равнялся на высоту изображения, а не наоборот?

[Flying]

Это, конечно, можно сделать, просто задача формулировалась другим образом. Однако стоит понимать что если цель - показывать картинку целиком при любом размере viewport'а - то придётся либо жертвовать размером картинки (уменьшать её при ресайзе) либо жертвовать пространством для текста (картинка при ресайзе будет занимать больше места чем текст).

Также в этом случае надо будет учитывать то что картинки в блоках должны будут иметь строго одинаковые пропорции (а лучше - одинаковый размер) чтобы результат выглядел хорошо. Без знания деталей задачи дать однозначный ответ вряд ли можно, но сам принцип очень прост - вставляйте картинку как img, а не через background и используйте её как основу для выстраивания остального layout'а. В этом случае картинка точно всегда будет показываться полностью, а вот что будет с остальными элементами - будет зависеть от ваших приоритетов, основные моменты на которые стоит обратить внимание я описал выше.

Answer 2

[Максим Тимофеев]

А медиазапросами для разных случаев разный background-size не годится?

.ululyaka {background-size: contain;}
@media screen and (min-device-width: 1600px) {
.ululyaka {background-size: cover;}
}
@media screen and (min-device-width: 456000px) {
.ululyaka {background-size: 100% 50%;}
}