Задать вопрос
@ilia_makar_77
html

Сетка изображений ломается при уменьшении ширины браузера, как поправить?

Есть такая структура изображений, и нужно ее уменьшать пропорционально уменьшению ширины экрана.
Но при уменьшении ширины сейчас одно изображение выпадает, другие слипаются... как поправить?
Код - jsfiddle.net/0h3ga1sq

Может не туда копаю, как лучше сверстать такой блок изображений, что бы он поддерживал пропорциональное сужение?
Таких таблиц на странице будет 3 штуки и все должны немного пропорционально сужаться.
  • Вопрос задан
  • 210 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 2
julia_amake
@julia_amake
Front-end разработчик
Так? jsfiddle.net/0h3ga1sq/3
Ответ написан
Комментировать
Комментировать
@lazarev_s_a 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="wrapper">
<div class="images">
<div class="box2"><img src="http://dummyimage.com/497x246/555/fff.png" /></div>
<div class="box"><img src="http://dummyimage.com/246x246/555/fff.png" /></div>
<div class="box"><img src="http://dummyimage.com/246x246/555/fff.png" /></div>
            <div class="clear"></div>    
<div class="box"><img src="http://dummyimage.com/246x246/555/fff.png" /></div>
<div class="box"><img src="http://dummyimage.com/246x246/555/fff.png" /></div>
<div class="box2"><img src="http://dummyimage.com/497x246/555/fff.png" /></div>
            <div class="clear"></div>
<div class="box2"><img src="http://dummyimage.com/497x246/555/fff.png" /></div>
    
<div class="box"><img src="http://dummyimage.com/246x246/555/fff.png" /></div>
<div class="box"><img src="http://dummyimage.com/246x246/555/fff.png" /></div>
            <div class="clear"></div>
<div class="box"><img src="http://dummyimage.com/246x246/555/fff.png" /></div>
<div class="box"><img src="http://dummyimage.com/246x246/555/fff.png" /></div>
<div class="box2"><img src="http://dummyimage.com/497x246/555/fff.png" /></div>
    <div class="clear"></div>


</div>
</div>
</body>
</html>


.wrapper{
	position: static;
	width: 100%;
	margin: auto;
}
.images{
	width: 95%;
	max-width: 1000px;
}
.box{
	width: 25%;
	float: left;
    padding: 1px;
	box-sizing: border-box;
}
.box2{
	width: 50%;
	float: left;
    padding: 1px;
	box-sizing: border-box;
}
.box img{
  width:100%;
  max-width: 246px;
  height: auto;
}
.box2 img{
  width:100%;
  max-width: 497px;
  height: auto;
}
.clear {
    clear: both;
}
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
CRM Bitrix24 разработчик
World Vision Clinic • Москва
от 170 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработать 3D модель лопасти
23 дек. 2024, в 10:43
5000 руб./за проект
Разработать принципиальную схему в Altium Designer
23 дек. 2024, в 10:32
2000 руб./за проект
Разработать бота для отслеживания неудачных тон транзакций
23 дек. 2024, в 09:55
10000 руб./за проект
Ещё заказы