thomasLaybe
@thomasLaybe
Программист с смыслом жизни

Как адаптировать изображения в блоке?

Добрый день!
Уже второй день парюсь насчет адаптация изображений в блоке(блога)
На больших экранах блок просто встает центр экрана и сами изображения никак не меняют ширину высоту, как бы я ширину и длину блока не указывал в процентах и т.п

собственно сам блок)
articles {
background-color: #121214;
height: 1000px;
width: 82.88333333333333%;
float: right;
}

Думаю, дело даже не в блоке, а в самих изображениях. Каждое изображение имеет разную ширину и высоту и выставлены в ряд, вот пример одного изображения
.box2 {
width: 811px;
height: 314px;
position: absolute;
overflow: hidden;
margin: -580px 764px;
}
.box2 img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 811px;
height: 314px;
object-fit: cover;
}

Дело в том, что изображения обрезаются, чтобы каждая картинка хорошо смотрелась с той или иной шириной и высотой

P.S И сами изображения не встают на свободное место и никак не двигаются с места...

Выручите и сохраните мои нервы. С уважением Thomas!)
  • Вопрос задан
  • 140 просмотров
Решения вопроса 1
@ArtJH
max-width: 100%
background-size: cover;
object-fit: coder;
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Kozack
@Kozack Куратор тега CSS
Thinking about a11y
Ну, вот там где вы растягиваете блок, вам нужно растягивать изображение, и ставить его туда, куда вы хотите.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы