Как сделать резиновые картинки с одинаковой высотой?
Есть блок с резиновой шириной, в нем картинка и подпись снизу. Если делать фото резиновыми, то высота блока меняется. На скрине это видно. Первый блок это пример того, как должны быть остальные.
- Вопрос задан более трёх лет назад
- 5371 просмотр
1 комментарий
Оценить 1 комментарий
Резиновая плитка из картинок
!Здраствуйте. Подскажите, как можно сделать вот такую мини-галерею из картинок резиновой. С шириной все в порядке, а высоту никак не задать в процентах. Заранее спасибо)
Отслеживать
задан 16 мар 2019 в 16:15
Elisey Popov Elisey Popov
75 1 1 серебряный знак 6 6 бронзовых знаков
резиновый, это вам на завод красный треугольник 🙂 не понятно что Вам надо 🙂
16 мар 2019 в 16:19
Уменьшается окно, уменьшаются картинки
16 мар 2019 в 16:26
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Высота в % — небольшой хак с помощью
height: 0 padding-bottom: 100% html, body < margin: 0; padding: 0; >ul, li < margin: 0; padding: 0; >ul < font-size: 0px; >li < display: inline-block; font-size: 16px; list-style: none; position: relative; width: 25%; >li .bl-img < position: relative; width: 100%; height: 0; padding-bottom: 100%; >li .bl-img img
Отслеживать
ответ дан 16 мар 2019 в 16:27
2,550 2 2 золотых знака 10 10 серебряных знаков 22 22 бронзовых знака
Теоретически высоту можно задать в процентах, но для этого у родительского блока должна быть фиксированная высота. Возможно, вам подойдут единицы измерения vh. height: 80vh; например, будет означать высоту в 80% от общей высоты экрана, тем самым, при изменении высоты экрана, блок всегда будет занимать 80% высоты всей страницы
Отслеживать
ответ дан 16 мар 2019 в 16:28
131 5 5 бронзовых знаков
- html
- css
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.4.30.8420
Резиновые изображения
Заставить изображения масштабироваться пропорционально «резиновому» дизайну для современных браузеров (включая Internet Explorer версии 7 и выше) не составляет особого труда. Для этого нужно лишь объявить в CSS следующее:
В результате все изображения будут масштабироваться вплоть до 100 % ширины их элемента-контейнера. Более того, аналогичный атрибут и свойство могут быть применены к другим мультимедиа. Например:
Они тоже будут масштабироваться, не считая нескольких примечательных исключений вроде видео в теге с сайта YouTube. О том, как с ними справиться, мы поговорим в главе 4. А сейчас сосредоточимся на изображениях, поскольку принцип будет тем же, что и раньше, независимо от мультимедиа.
При использовании этого подхода необходимо учитывать несколько важных моментов. Во-первых, он предполагает упреждающее планирование: добавляемые изображения должны быть достаточно велики для того, чтобы масштабироваться соразмерно крупным областям просмотра. Это приводит нас к следующему, возможно, более важному моменту. Независимо от того, каким будет размер области просмотра или устройство, используемое для обозрения сайта, все равно придется загружать большие изображения, даже если в области просмотра на определенных устройствах пользователям потребуется увидеть то или иное изображение размером всего лишь 25 % от его фактической величины. В некоторых случаях проблема заключается в скорости канала подключения пользователя, поэтому мы вскоре вернемся ко второму из описанных выше моментов. А пока позаботимся о том, чтобы наши изображения масштабировались.
Вам также могут быть интересны следующие статьи:
- Нужно ли заменять автомобильное масло к зиме?
- Адаптивное видео
- Устранение проблем со стилизацией с помощью Modernizr
- HTML5 — округление чисел
- Стили линий в CSS3
Как сделать картинку резиновой
Добро пожаловать в проект «Сайт с нуля» !
Прежде всего данный проект предназначен для тех, кто пытается создать сайт самостоятельно, то есть для новичков. Соответственно, вся информация изложена доступно, все этапы построения сайта сопровождаются скриншотами, что позволит начинающим вебмастерам быстро и просто освоиться в этом нелегком вопросе.
Здесь вы можете скачать русские версии WebPageMaker, WordPress, Joomla, Adobe Muse, а также инструкции по установке WordPress и Joomla на хостинг и мануалы по установке тем (шаблонов) для этих CMS.
Всем желаю удачи и смелых воплощений идей на вашем сайте !
2010 — 2016 © Сайт с нуля: пошаговое руководство для новичков по созданию, раскрутке и монетизации собственного сайта. WebPageMaker, WordPress, Joomla — русские версии.
Автор и администратор данного проекта — SvetLana_TSV. Копирование материалов сайта разрешено только при наличии активной ссылки на данный проект.
Проект для новичков
Хочешь быть на шаг впереди и первее
остальных получать новые материалы
сайта? Тогда не забудь оставить свои
координаты: имя и электронный адрес!
Полезные материалы:
Адаптивный (резиновый) фон для сайта
Приветствую всех посетителей сайта! Сегодня мы будем рассматривать простую технику создания адаптивного фона, который будет полностью растягиваться на всю ширину окна браузера. То есть, при изменении пропорций окна браузера будут меняться и пропорции фонового изображения сайта.
В настоящее время очень популярно в веб-дизайне использование в качестве фона большой картинки или фотографии, которая занимает весь первый экран. Обычно, в верхней части такого изображения размещают меню, логотип, контакты, а основной контент начинается сразу под фото. Как вариант — использование полноэкранных адаптивных слайдеров, подстраивающихся под размеры экрана пользователя.
Для фона рекомендую подобрать качественное изображение высокого разрешения, чтобы на широкоформатных мониторах не происходило его масштабирование. Ведь если фоновая картинка на широкоформатном мониторе окажется меньше размера элемента body, каковым является «тело» вашего сайта, браузер автоматически масштабирует картинку до нужных размеров, а это чревато появлением пикселизации.
В примере я использую изображение размером 3600 Х 2400рх. Исходный вес картинки 2,18 МБ (а это очень много!) я оставила без изменений, чтобы вы смогли убедиться, что «тяжелые» изображения медленнее загружаются, особенно на мобильных устройствах. Поэтому специально для мобильных гаджетов мы будем использовать второй вариант изображения — более малого размера и веса, например, 768 Х 505 рх.
Подключается малое изображение с помощью медиа-запросов, в которых мы задаем максимальную ширину экрана мобильных устройств, в моем примере она 767рх. То есть, на маленьких экранах до 767рх включительно, будет отображаться меньшее изображение (в целях экономии мобильного трафика и увеличения скорости загрузки), а на экранах размером свыше 767рх будет показываться оригинальное изображение.
И малое, и большое изображения обязательно перед использованием оптимизируйте, уменьшите их вес в одном из онлайн-сервисов . Это займет не больше минуты и позволит «сжать» фото по весу в несколько раз.
Перед тем, как приступить к установке адаптивного фонового изображения, в качестве примера приведу несколько сайтов, где вы можете посмотреть принцип работы адаптивного фона. Изменяйте размер окна браузера и увидите, как меняется фоновая картинка.