В макете CSS Grid мои изображения переполняют свои контейнеры, если я не использую overflow: Hidden. Правильная ли это п ⇐ Html

[Anonymous]

Здесь я добавил снимок экрана макета перед использованием тега


в противном случае это будет работать следующим образом:
удаление переполнения: скрыто

Код: Выделить всё

body,
html {
margin: 0;
padding: 0;
text-align: center;
}

.items {
background: blue;
border: 1px solid yellow;
overflow: hidden;
}

.image {
height: 100%;
width: 100%;
object-fit: cover;
/* display:none; */

}

.container {
margin: 0 auto;
height: 80vh;
width: 700px;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
}

.div1 {
grid-area: 1/1/2/4;
}

.div2 {
grid-area: 1/4/2/5;
}

.div3 {
grid-area: 2/1/5/2;
}

.div4 {
grid-area: 2/2/4/4;
}

.div5 {
grid-area: 2/4/4/5;
}

.div6 {
grid-area: 4/2/5/5;
}

Код: Выделить всё

Photo gallery


[img]https://picsum.photos/200/300[/img]

[img]https://picsum.photos/500/200[/img]
[img]https://picsum.photos/200[/img]
[img]https://picsum.photos/400/300[/img]
[img]https://picsum.photos/300[/img]
[img]https://picsum.photos/200/125[/img]

Подробнее здесь: https://stackoverflow.com/questions/798 ... e-overflow