0

У меня в макете 3 картинки размером 767 на 426 пикселей. Как их корректно вставить в код, картинкой или блоком, посредством фона, как адаптировать под маленькие экраны, и они у меня идут в виде галереи, все вместе, то есть получается уже после разрешения 1500 пикселей, нужно думать об адаптиве. Подскажите пожалуйста решение. Спасибо.

1 ответ 1

0

Без потери качество отображения картинок - не обойтись. Наиболее оптимальным. мне кажется, будет вставлять картинки беграудом в блоки. И адаптировать высоту и ширину самих блоков

<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}
}
3
  • Спасибо Вам. Я тоже преимущественно склонялся к тому чтобы решать проблему блоками. Вы подтвердили моё мнение. Единственное, что мне ещё не ясно, это будет галерея, при клике на картинку пользователь должен увидеть её увеличенной в виде модального окна. Если подключить плагин, к примеру Magnific popup, будет ли это нормой в плане семантики по отношению к фотографиям? Commented 22 апр. 2020 в 17:55
  • На сколько я вижу, Magnific popup - поддерживает получение изображение из блоков/ссылок и так далее. Нужно будет только добавить необходимые атрибуты, к блокам галереи. Commented 22 апр. 2020 в 18:04
  • Спасибо Вам! Очень помогли. Commented 22 апр. 2020 в 18:06

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.