У меня в макете 3 картинки размером 767 на 426 пикселей. Как их корректно вставить в код, картинкой или блоком, посредством фона, как адаптировать под маленькие экраны, и они у меня идут в виде галереи, все вместе, то есть получается уже после разрешения 1500 пикселей, нужно думать об адаптиве. Подскажите пожалуйста решение. Спасибо.
1 ответ
Без потери качество отображения картинок - не обойтись. Наиболее оптимальным. мне кажется, будет вставлять картинки беграудом в блоки. И адаптировать высоту и ширину самих блоков
<div class="img_Block img_1"></div>
<div class="img_Block img_2"></div>
<div class="img_Block img_3"></div>
Общие CSS стили для блоков
.img_Block {
max-width: 768px;
height: 426px;
width:100%;
background-color: #d9d9d9;
background-size: cover;
background-position: center;
}
.img_1 { background-image:url([THIS_IS_URL_IMG_1]);}
.img_2 { background-image:url([THIS_IS_URL_IMG_2]);}
.img_3 { background-image:url([THIS_IS_URL_IMG_3]);}
Адаптируем высоту и ширину блоков.
@media only screen and (max-width: 1500px) {
img_Block {max-width: 500px}
}
-
Спасибо Вам. Я тоже преимущественно склонялся к тому чтобы решать проблему блоками. Вы подтвердили моё мнение. Единственное, что мне ещё не ясно, это будет галерея, при клике на картинку пользователь должен увидеть её увеличенной в виде модального окна. Если подключить плагин, к примеру Magnific popup, будет ли это нормой в плане семантики по отношению к фотографиям? Commented 22 апр. 2020 в 17:55
-
На сколько я вижу, Magnific popup - поддерживает получение изображение из блоков/ссылок и так далее. Нужно будет только добавить необходимые атрибуты, к блокам галереи. Commented 22 апр. 2020 в 18:04
-