Как сделать изображение, подстраивающееся под размеры блока? [закрыт]
Закрыт. Этот вопрос необходимо уточнить или дополнить подробностями. Ответы на него в данный момент не принимаются.
Хотите улучшить этот вопрос? Добавьте больше подробностей и уточните проблему, отредактировав это сообщение.
Закрыт 8 лет назад .
Есть DIV, размеры которого вычисляются через js. Высота и ширина у блока фиксированные. Какие стили нужно прописать изображению, которые находится в блоке, чтобы изображение подстраивалось под размеры блока (было пропорционально уменьшено)?
Отслеживать
задан 24 окт 2015 в 13:50
Frontender Frontender
2,625 23 23 золотых знака 66 66 серебряных знаков 116 116 бронзовых знаков
какой-нибудь фреймворк используете? Bootstrap, например?
24 окт 2015 в 13:55
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Без кода ответить сложно, но вобщем-то Вам надо дать ширину в процентах: width: 100%;
Также, если есть возможность выяснить размеры картинки, то хорошо бы еще указать max-width: [amount]px; , чтобы картинка не располхалась больше своего значения.
Во всем этом есть один минус — высота картинки будет пропорционально меняться, и, в зависимости от размеров блока, может влиять на форматирование страницы в целом — будет вылезать за блок, или на оборот, слишко много места пустого в блоке.
Вобщем все сводится к тому, что такие вопросы надо ВСЕГДА задавать, прилагая пример кода, и лучше fiddle.
Как сделать изображение по размеру блока?
Сделать изображение по размеру блока через css можно за два шага. Нужно для изображения задать обертку. Это может быть любой элемент. Эта обертка будет ограничителем размера и для него задаем ширину и высоту (wight и hight).
После этого, помещаем картинку в наш контейнер и прописываем стили. Как было сказано выше, для обертки обязательно задаем высоту и ширину. Остальные стили задаются для сохранения дизайна сайта.
Чтобы картинка растянулась по размерам блока-обертки добавляем свойство object-fit.
Определяемся с желаемым результатом. Если написать object-fit: cover, то изображение растянется на весь блок, но может быть обрезано или будут нарушены пропорции.
Обойти это можно используя object-fit: fill, в результате чего картинка будет вписана в размер блока без нарушения пропорций.
После добавления свойства object-fit для изображения, в стилях задайте высоту и ширину на 100%.
Пример кода