Как расположить картинки в одну строку?
Нужно расположить картинки в один ряд с сохранением пропорций, одинаковой высотой и заданной шириной ряда.
Т.е. имеется родительский блок div с шириной 700px. В нем нужно расположить в один ряд, скажем, 4 картинки так, чтобы этот ряд растянулся на всю ширину родительского дива. Высота у картинок должна быть однинаковой. Пропорции должны сохраняться.
В качестве примера можно посмотреть как располагаются картинки на vk.com
- Вопрос задан более трёх лет назад
- 5839 просмотров
Как разместить в ряд три изображения в квадратных областях
В итоге должно получиться что-то типа этого:
Отслеживать
задан 27 мая 2015 в 10:47
352 1 1 золотой знак 2 2 серебряных знака 14 14 бронзовых знаков
Перенесите дополнения из комментариев в сам вопрос. Вопрос должен быть самодостаточным.
27 мая 2015 в 21:25
4 ответа 4
Сортировка: Сброс на вариант по умолчанию
div < background: #737373; float: left; position: relative; width: 30%; padding-bottom: 30%; margin: 1.66%; >div:hover < background: black; >img
Отслеживать
ответ дан 29 мая 2015 в 20:19
27.6k 5 5 золотых знаков 35 35 серебряных знаков 66 66 бронзовых знаков
Да, это то, что было нужно! благодарю Вас!
30 мая 2015 в 4:43
Навскидку — 3 дива у которых ваши изображения — это бекграунд. задайте жестко стороны дивов — и пропорции не сломаются. также можно прописать background-size: contain
опишите подробнее , какое должно быть поведение картинок при расширении / сужении экрана
Отслеживать
ответ дан 27 мая 2015 в 10:56
85 1 1 серебряный знак 12 12 бронзовых знаков
При изменении ширины экрана картинка должна оставаться квадратной и масштабироваться.
27 мая 2015 в 11:03
Жестко это в пикселях? Тогда надо будет через js менять стиль. Или я могу в css менять высоту при изменении ширины?
27 мая 2015 в 11:04
При изменении ширины экрана картинка должна оставаться квадратной и масштабироваться я так понимаю, в таком случае, эти картинки должны меняться и по высоте ? или должно увеличиваться между ними расстояние ? ТОгда так codepen.io/anon/pen/ZGBmYJ
27 мая 2015 в 13:17
При изменении ширины экрана картинки должны тоже изменяться по высоте и ширине, оставаясь квадратными.
27 мая 2015 в 16:36
Вообще правильно это делать при помощи img и какого-нибудь wraper’а. Я просто модифицировал свой пример. Написал небольшой скриптик c использованием jQuery:
$(window).resize( function() < var cw = $('.figure').width(); $('.figure').css(); > ); Отслеживать
ответ дан 27 мая 2015 в 12:37
Astemir Almov Astemir Almov
193 8 8 бронзовых знаков
Пишу приложение на ionic. JQ туда вставлять не хочется, ведь там есть AngularJs. Хотелось обойтись чистым css.
28 мая 2015 в 9:57
Окей. Сейчас будем вспоминать как это сделать при помощи чистого CSS. Вы хотите, чтобы изображения масштабировались по высоте и ширине при изменениях размеров окна?
28 мая 2015 в 10:06
Да, именно так.
29 мая 2015 в 12:33
Не нужны скрипты для этой задачи.
29 мая 2015 в 20:50
Я бы посоветовал использовать какой нибудь css framework, например bootstrap, тогда большинство стандартных вопросов с версткой отпадут сами по себе, так как большинство классов уже готовы к использованию и их просто нужно использовать(Про сетки) , если же нужен ответ на Ваш попробуйте его задать более раскрыто, что бы не всплыли подводные камни.
Отслеживать
ответ дан 27 мая 2015 в 13:13
Kristofer Sanders Kristofer Sanders
1 1 1 бронзовый знак
- html
- css
- вёрстка
- адаптивная-верстка
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.1.3.2953
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как разместить несколько картинок рядом по горизонтали?
Добавить на страницу несколько изображений, чтобы они располагались рядом с друг другом по горизонтали.
Решение
Изображения являются строчными элементами, поэтому написание в коде подряд несколько тегов автоматически выстроит картинки по горизонтали. Тем не менее, с помощью стилей этим построением можно управлять более изящно.
Для начала рассмотрим простой пример, когда изображения выстраиваются по горизонтали без стилевого оформления (пример 1).
Пример 1. Картинки по горизонтали
HTML5 IE Cr Op Sa Fx
Фотографии Результат данного примера показан на рис. 1. Изображения выстраиваются в одну строку по горизонтали, а если некоторые из них не помещаются по ширине в окне, то переносятся на следующую строку.
Рис. 1. Фотографии, расположенные по горизонтали
Обратите внимание на пробел между фотографиями, он появляется за счет переноса тега в коде на новую строку. Чтобы убрать пустой промежуток достаточно написать теги
в примере в одну строку.
Для регулирования горизонтальных и вертикальных отступов между фотографиями применяется стилевое свойство margin-right и margin-bottom . В примере 2 кроме отступов к фотографиям также добавлена рамка и цветная область вокруг изображений.
Пример 2. Отступы у фотографий
HTML5 CSS 2.1 IE Cr Op Sa Fx
Фотографии
Результат данного примера показан на рис. 2.
Рис. 2. Вид фотографий, оформленных с помощью стилей
Как расположить картинку с div’ом в одну строку?
С inline-block между элементами ставится «пробел», поэтому в вашем случае div просто не влезает в ширину контейнера.
Поставьте контейнеру font-size: 0, а в дочерних элементах верните размер шрифта на место, и все будет ок.
UPD:
Кроме того, нужно добавить вот это:
#container img
Вот полный код CSS (html из вопроса):
body < background: #e5e9ff; >#container < width: 687px; height: 394px; background: #f4f5fa; font-size: 0; >#container img < width: 369px; height: 394px; vertical-align: top; >#container .right
Ответ написан более трёх лет назад
Нравится 2 1 комментарий
d3_dx @d3_dx Автор вопроса
За пояснение про инлаин блок спасибо, причина по которой не работает иногда важнее, чем просто написанное решение проблемы)