How to make img fit div with vanilla Html & CSS?-CodePudding

The Problem

There is a space below the img in md screen size, and I try to get rid of it.

I've tried to add pa-0 in class, but still can't figure out how to achieve the result.

Restriction

Since the whole code will be received in frontend Nuxt2 in v-html to represent the description image. So I couldn't add CSS as well. Only vanilla html Some Vuetify syntax.

Update

This is for Nuxt2 with Vuetify, using in v-html.

Update ver.2

Initially there is a css attribute in the section of v-html.

margin-bottom: 12px;

But the answer is a good format to code in vanilla html.

my code

<div >
  <div  style="background-color: #f6f6f6">
    <div >
      <h1 >Main Property</h1>
      <div >
        <h5>Water</h5>
        <div ><small>And more</small></div>
      </div>
    </div>
    <div >
      <img  src="https://images.unsplash.com/photo-1668277280345-f3949c1b6aa2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" lazy-src="https://images.unsplash.com/photo-1674707735136-3d3a8720397e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=688&q=80"
        alt="test" />
    </div>
  </div>
</div>

CodePudding user response：

To make the image fit the div, you can add the following CSS styles to the image:

img {
  width: 100%;
  height: auto;
  display: block;
}

This will cause the image to fill the div horizontally, and the height will automatically adjust to maintain the aspect ratio of the image. The display:block attribute ensures that the image is a block-level element, so it takes up the entire width of its parent container.

CodePudding user response：

Hey this sounds like an an issue with line height getting the best of things, simply set the font-size of the image container to 0 and the bottom space should disappear.

div {
  font-size: 0;
}