How do i fit the image in the border? - html

Question

How do I fit the whole image with borders as there is some space below it. AnyHelp would be appreciated, thanks . I have attached my code below, please refer it .
.Details {
margin-top: 100px;
}
.flexitems {
display: flex;
margin: 10px 100px 30px 100px;
width: 70%;
margin-left: 210px;
}
.sectionimg {
/*Flex-grow flex-shrink flex-basis*/
flex: 1 1 50%;
margin-right: 20px;
border: 4px solid rgb(0, 0, 0);
border-radius: 10px;
}
.flexinvert {
flex-direction: row-reverse;
}
.sectionimg img {
max-width: 100%;
}
.sectionhead {
font-size: 30px;
}
<section class="Details">
<div class="flexitems">
<div class="sectiontext">
<p class="sectionhead">More Than 1 Lakh Collection Of Items</p>
<p class="sectionsubhead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque ratione nostrum rem in, illo repellat eius minima aspernatur beatae ipsa officiis, fugiat enim cumque magnam. Repellendus dicta amet distinctio aspernatur!</p>
</div>
<div class="sectionimg">
<img src="Jeans.jpg" alt="">
</div>
</div>
<div class="flexitems flexinvert">
<div class="sectiontext">
<p class="sectionhead">More Than 1 Lakh Collection Of Items</p>
<p class="sectionsubhead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque ratione nostrum rem in, illo repellat eius minima aspernatur beatae ipsa officiis, fugiat enim cumque magnam. Repellendus dicta amet distinctio aspernatur!</p>
</div>
<div class="sectionimg">
<img src="mainpic.png" alt="">
</div>
</div>
<div class="flexitems">
<div class="sectiontext">
<p class="sectionhead">More Than 1 Lakh Collection Of Items</p>
<p class="sectionsubhead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque ratione nostrum rem in, illo repellat eius minima aspernatur beatae ipsa officiis, fugiat enim cumque magnam. Repellendus dicta amet distinctio aspernatur!</p>
</div>
<div class="sectionimg">
<img src="shirt.jpg" alt="">
</div>
</div>
</section>

Answer 1

You can try to object fit image and fullwidth its' height.
.sectionimg img {
max-width: 100%;
object-fit: cover;
height: 100%
}

Answer 2

All you need to do is specify height: 100%; to .sectionimg img so the image takes the full width and height of the parent.
.Details {
margin-top: 100px;
}
.flexitems {
display: flex;
margin: 10px 100px 30px 100px;
width: 70%;
margin-left: 210px;
}
.sectionimg {
/*Flex-grow flex-shrink flex-basis*/
flex: 1 1 50%;
margin-right: 20px;
border: 4px solid rgb(0, 0, 0);
border-radius: 10px;
}
.flexinvert {
flex-direction: row-reverse;
}
.sectionimg img {
max-width: 100%;
height: 100%;
}
.sectionhead {
font-size: 30px;
}
<section class="Details">
<div class="flexitems">
<div class="sectiontext">
<p class="sectionhead">More Than 1 Lakh Collection Of Items</p>
<p class="sectionsubhead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque ratione nostrum rem in, illo repellat eius minima aspernatur beatae ipsa officiis, fugiat enim cumque magnam. Repellendus dicta amet distinctio aspernatur!</p>
</div>
<div class="sectionimg">
<img src="https://dummyimage.com/600x400/000/fff" alt="">
</div>
</div>
<div class="flexitems flexinvert">
<div class="sectiontext">
<p class="sectionhead">More Than 1 Lakh Collection Of Items</p>
<p class="sectionsubhead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque ratione nostrum rem in, illo repellat eius minima aspernatur beatae ipsa officiis, fugiat enim cumque magnam. Repellendus dicta amet distinctio aspernatur!</p>
</div>
<div class="sectionimg">
<img src="https://dummyimage.com/600x400/000/fff" alt="">
</div>
</div>
<div class="flexitems">
<div class="sectiontext">
<p class="sectionhead">More Than 1 Lakh Collection Of Items</p>
<p class="sectionsubhead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque ratione nostrum rem in, illo repellat eius minima aspernatur beatae ipsa officiis, fugiat enim cumque magnam. Repellendus dicta amet distinctio aspernatur!</p>
</div>
<div class="sectionimg">
<img src="https://dummyimage.com/600x400/000/fff" alt="">
</div>
</div>
</section>