Как выстроить картинки в ряд html

Как разместить в ряд три изображения в квадратных областях

В итоге должно получиться что-то типа этого:

Отслеживать
задан 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 серебряных знаков 65 65 бронзовых знаков
Да, это то, что было нужно! благодарю Вас!
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.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как расположить картинки в одну строку?

Нужно расположить картинки в один ряд с сохранением пропорций, одинаковой высотой и заданной шириной ряда.

Т.е. имеется родительский блок div с шириной 700px. В нем нужно расположить в один ряд, скажем, 4 картинки так, чтобы этот ряд растянулся на всю ширину родительского дива. Высота у картинок должна быть однинаковой. Пропорции должны сохраняться.

В качестве примера можно посмотреть как располагаются картинки на vk.com

• Вопрос задан более трёх лет назад
• 5602 просмотра

3 картинки в ряд css

Css картинки не стают в ряд
Добрый день, столкнулся с проблемой картинки не помещаются в ряд (как я понимаю причину. ) кто.

Картинки в ряд
Как поставить картинки с ссылкой в один горизонтальный ряд ? <p><a href="text1.html"><img.

Из картинки в CSS
Народ, захотелось заменить картинку на CSS+HTML Не могу подобрать примерный градиент, как на.

50 / 42 / 25
Регистрация: 05.12.2013
Сообщений: 275
mrVlados95, адрес сайта, если возможно.
Регистрация: 28.12.2011
Сообщений: 65
GreenForest, http://mrvlados.my1.ru/prechu/index.html
50 / 42 / 25
Регистрация: 05.12.2013
Сообщений: 275
У Вас вообще вот так написан код

1 2 3 4 5

div class="conteiner"> img src="img/1.png" alt="" idth="186" height="186"/>a href="#">Contrary to popular/a> /div> img src="img/2.png" alt="" idth="186" height="186"/>a href="#">Contrary to popular/a> img src="img/3.png" alt="" idth="186" height="186"/>a href="#">Contrary to popular/a>

Добавлено через 4 минуты

1 2 3 4 5 6 7 8

div class="container"> img src="img/1.png" alt="" idth="186" height="186"> img src="img/2.png" alt="" idth="186" height="186"> img src="img/3.png" alt="" idth="186" height="186">/div> a href="#"> Вопреки распространенному/font>/font>/a> a href="#"> Вопреки распространенному/font>/font>/a> a href="#"> Вопреки распространенному/font>/font>/a>

Вот так. Только отступы между ними задай, какие тебе нужны.
Регистрация: 08.01.2014
Сообщений: 28
заверните картинку со ссылкой в div, а в стилях пропишите

.conteiner div{display: inline-block; width:186px}

но также можно было не задавать ширину для div, а просто поставить тег
после картинки
50 / 42 / 25
Регистрация: 05.12.2013
Сообщений: 275

Сообщение от Sasha001

поставить тег
Разве тогда картинки не будут друг под другом?
Регистрация: 08.01.2014
Сообщений: 28

GreenForest, для этого и нужно создать div’ы внутри блока .conteiner для картинки вместе со ссылкой, они вроде как одно целое

50 / 42 / 25
Регистрация: 05.12.2013
Сообщений: 275

Sasha001, Даладна? А может лучше не заморачиваться и пододвинуть div отсюда

1 2 3 4 5

div class="conteiner"> img src="img/1.png" alt="" idth="186" height="186"/>a href="#">Contrary to popular/a> /div> img src="img/2.png" alt="" idth="186" height="186"/>a href="#">Contrary to popular/a> img src="img/3.png" alt="" idth="186" height="186"/>a href="#">Contrary to popular/a>

1 2 3 4

div class="container"> img src="img/1.png" alt="" idth="186" height="186"> img src="img/2.png" alt="" idth="186" height="186"> img src="img/3.png" alt="" idth="186" height="186">/div>

Зачем переполнять код дополнительными ненужными слоями?
Регистрация: 08.01.2014
Сообщений: 28
GreenForest,
вот так правильно будет

1 2 3 4 5

div class="conteiner"> div>img src="img/1.png" alt="" idth="186" height="186"/>a href="#">Contrary to popular/a>/div> div>img src="img/2.png" alt="" idth="186" height="186"/>a href="#">Contrary to popular/a>/div> div>img src="img/3.png" alt="" idth="186" height="186"/>a href="#">Contrary to popular/a>/div> /div>

т.к. эти блоки можно двигать(например в центр или друг от друга на 50px), картинка будет вместе со ссылкой перемещаться, а так в стилях придется отдельно задавать и для картинки, и для ссылки.

Регистрация: 12.01.2015
Сообщений: 4

Здравствуйте, всетаки не могу понять, как поставить картинки чтоб было по три в ряд. Помогите пожалуйста.

1 2 3 4 5 6 7 8

 for ($i = 0; $i $anabel_arto_count; $i++):?> 
 echo ${'anabel_arto_'.$i}['img_name'];?>">  
 echo ${'anabel_arto_'.$i}['name'];?>  echo ${'anabel_arto_'.$i}['cost'];?> 
  endfor;?>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

div.img { margin: 5px; padding: 5px; height: auto; width: auto; float: left; text-align: center; } div.img img { display: inline; margin: 5px; border: 1px solid rgba(139,0,139,0.2); } div.img a:hover img { border:1px solid #8B008B; } div.desc { text-align: center; font-weight: normal; width: 120px; margin: 5px; }

87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь

Расположить рекламные блоки в ряд, CSS
Подскажите пожалуйста как расположить 5 тизер блоков ГОРИЗОНТАЛЬНО вряд, и чтоб надписи под ними не.

Как задать положение картинки внутри другой картинки? CSS, HTML
Добрый день. Начинаю учить веб-разработку и решил написать простенький сайт. В общем, нужно.

Картинки в ряд
Есть три картинки: две из них вращаются вокруг третьей. Нужна программа, чтобы, при расположении.

phpBB : настройка и модификация

По умолчанию прикреплённые к сообщениям в phpBB3 картинки-вложения отображаются столбиком. Вдобавок, вокруг них идёт различная дополнительная информация, такая как имя файла, количество скачиваний вложения и т.д. Некоторым пользователям это не нравится, они считают такой вид неудачным и ищут способ сделать иначе. Иногда картинки пытаются выстроить в ряд, задав блокам с картинками свойство float. Это решение, на мой взгляд, неудачно, потому что оформленные при помощи float элементы — нестабильны и будут расползаться при каждом удобном случае. Но есть способ сделать более культурно, в этом нам поможет замечательное CSS-свойство display: inline. Инструкция будет дана для тех случаев, когда картинка вставлена в текст и к ней не задан комментарий.

Открываем файл styles/prosilver/theme/content.css , ищем там код:

div.inline-attachment p 

div.inline-attachment, dl.thumbnail dt, dl.file dt.attach-image

Заменить на:

 style="display: inline-block;">

  Заменить на:

   style="display: inline-block;">