How to resize a big image with css?-CodePudding

I want to make the image almost half the height it is now but it should cover the whole image not the zoomed part only. How do i do it? HTML code

<section >
        <div >
        <p >More Than 1 Lakh Collection Of Items</p>
        <p >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 >
            <img src="Jeans.jpg" alt="">
        </div>
    </section>

CSS

.Details {
  display: flex;
}
.sectionimg {
  width: 50%;
  height: 10%;
}

CodePudding user response：

See the modified example below. I'd suggest you do a research about how flex layout works and how image properties work in them.

.Details {
  display: flex;
}

.sectionimg {
  flex: 1 0 50%;
}

.sectionimg img {
  max-width: 100%;
}

<section >
  <div >
    <p >More Than 1 Lakh Collection Of Items</p>
    <p >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 >
    <img src="https://i.stack.imgur.com/Hc97v.png" alt="">
  </div>
</section>