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

[Anonymous]

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











и CSS:
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;
}


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