Как сделать адаптивные изображения по высоте и ширине?
Здравствуйте, никак не могу дойти до решения этого вопроса. Предположим, есть сайт на котором есть страница с большим списком разных компаний, у каждой компании есть логотип. Логотипы, естественно, разных пропорций и размеров.
Задача такова, блок с каждой компанией это прямоугольник, делящийся на две колонки В левой его колонке (меньшей) логотип, в правой (большей). И что бы логотип или его контейнер был отзывчив к изменению ширины окна не только по длине но и по высоте.
Не успел я удалить вопрос, уже ответы появились. Ну да ладно.
Сейчас у меня сделано с помощью padding-bottom хака. Изображение растягивается в квадрат 1:1 и при любом уменьшении окружающих блоков оно пропорционально сжимается по высоте и ширине. Естественно, проблема с логотипами которые не имеют соотношение сторон 1:1. Их приходится помещать на подложку в графическом редакторе перед загрузкой на сайт.
ну вы же сами понимаете что изображение по любому должно быть определённого размера иначе оно будет либо растянуто по вертикали либо по горизонтали , как раз для этого есть библиотеки которые помогают обрезать изображение до нужного размера на сайте прямо в редакторе
CSS
.logo { width: (задаете размеры которые вам нужно В ПРОПОРЦИЯХ, это обязательное условие )
width: 110 px;
height: 110 px; (например это квадрат
background: url (../img/путь картики) no-repeat:
background-size: cover;
background-position: center center;
Средний
