pictures expand inside the class without being distorted - css

Question

How do I make the pictures expand inside the class without being distorted and without edges or spaces between each other?
is there any other way to do this with Flexbox? there does not have to be a scrollbar and the .portof {class should not be too big in terms of height
How do I make the pictures expand inside the class without being distorted and without edges or spaces between each other?
is there any other way to do this with Flexbox? there does not have to be a scrollbar and the .portof {class should not be too big in terms of height
<pre>
<section class="Gallery">
<h1>Unsere Praxis</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatibus tempora accusantium provident ipsum placeat dolorem, dolores tempore optio, dignissimos eaque similique vel ea ullam nobis quas quae fugit laudantium sed!</p>
</section>
<!-- Portofolie -->
<section class="portof">
<div class="row">
<div class="wrapper">
<div class="container"> <img src="https://picsum.photos/350/250/?random=71" alt="?"></div>
<div class="container"> <img src="https://picsum.photos/350/250/?random=41" alt="?"></div>
<div class="container"> <img src="https://picsum.photos/350/250/?random=51" alt="?"></div>
<div class="container"> <img src="https://picsum.photos/350/250/?random=14" alt="?"></div>
<div class="container"> <img src="https://picsum.photos/350/250/?random=1" alt="?"></div>
<div class="container"> <img src="https://picsum.photos/350/250/?random=9" alt="?"></div>
<div class="container"> <img src="https://picsum.photos/350/250/?random=5" alt="?"></div>
<div class="container"> <img src="https://picsum.photos/350/250/?random=2" alt="?"></div>
<div class="container"> <img src="https://picsum.photos/350/250/?random=11" alt="?"></div>
<div class="container"> <img src="https://picsum.photos/350/250/?random=10" alt="?"></div>
</div>
<!-- <div class="gallery-row2">
sssdsd
</div>
--> </div>
</section>
</pre>
.Gallery{
width: 80%;
padding: 2% 0 0 0;
text-align: center;
margin: auto;
}
.Gallery h1{
font-size: 30px;
font-weight: 800;
color: #87CEEB;
}
.Gallery p{
padding-top: 10px;
font-family: 'Poppins', sans-serif;
font-weight: 30;
color: #000;
line-height: 30px;
font-size: 20px;
}
.portof{
width: 100%;
text-align: center;
background-color: royalblue;
background-image: url(img/slider_2.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-color: rgba(0, 0, 0, 0.8);
background-blend-mode: multiply;
clip-path: polygon(51% 19%, 100% 13%, 100% 85%, 51% 94%, 0 85%, 0 13%);
}
.wrapper {
padding: 2% 0 0 0;
font-size: 0;
display: block;
}
.container {
display: inline-block;
width: 20%;
}
img {
display: inline-block;
max-width: 100%;
}
.container:hover{
background-color: rosybrown;
}

Answer 1

Just update CSS class .wrapper display property to be flex and give the container zero padding as following
.wrapper {
padding: 2% 0 0 0;
font-size: 0;
display: flex;
}
.container {
display: inline-block;
width: 20%;
padding: 0;
}