Как сделать адаптивные изображения по высоте и ширине?

Question

[Андрей]

Здравствуйте, никак не могу дойти до решения этого вопроса. Предположим, есть сайт на котором есть страница с большим списком разных компаний, у каждой компании есть логотип. Логотипы, естественно, разных пропорций и размеров.
Задача такова, блок с каждой компанией это прямоугольник, делящийся на две колонки В левой его колонке (меньшей) логотип, в правой (большей). И что бы логотип или его контейнер был отзывчив к изменению ширины окна не только по длине но и по высоте.
Не успел я удалить вопрос, уже ответы появились. Ну да ладно.
Сейчас у меня сделано с помощью padding-bottom хака. Изображение растягивается в квадрат 1:1 и при любом уменьшении окружающих блоков оно пропорционально сжимается по высоте и ширине. Естественно, проблема с логотипами которые не имеют соотношение сторон 1:1. Их приходится помещать на подложку в графическом редакторе перед загрузкой на сайт.

Answer 1

[Максим]

ну вы же сами понимаете что изображение по любому должно быть определённого размера иначе оно будет либо растянуто по вертикали либо по горизонтали , как раз для этого есть библиотеки которые помогают обрезать изображение до нужного размера на сайте прямо в редакторе

Comments

[Андрей]

О каких библиотеках идет речь?

Answer 2

[Nifontov]

Ну например можно сделать следующим образом.


CSS
.logo { width: (задаете размеры которые вам нужно В ПРОПОРЦИЯХ, это обязательное условие )
width: 110 px;
height: 110 px; (например это квадрат
background: url (../img/путь картики) no-repeat:
background-size: cover;
background-position: center center;

и этот див с лого вы можете двигать как хотите!

Answer 3

[Ivan Bogachev]

Вам стоит почитать про свойство object-fit. Для IE придется подставлять полифилл, но в остальном - это наименее костыльное решение.