Как корректно вставить на сайт изображение большого размера и задать правильный адаптив, для отображения на маленьких экранах?
У меня в макете 3 картинки размером 767 на 426 пикселей. Как их корректно вставить в код, картинкой или блоком, посредством фона, как адаптировать под маленькие экраны, и они у меня идут в виде галереи, все вместе, то есть получается уже после разрешения 1500 пикселей, нужно думать об адаптиве. Подскажите пожалуйста решение. Спасибо.
Ответы (1 шт):
Автор решения: Sergey Dolmatov
→ Ссылка
Без потери качество отображения картинок - не обойтись. Наиболее оптимальным. мне кажется, будет вставлять картинки беграудом в блоки. И адаптировать высоту и ширину самих блоков
<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}
}