How to fit a img wholly into a div so that I don't see a background color?-CodePudding

A white background can be seen at the bottom of the div, can this be fixed?

.flexbox-item_one {
  display: inline-block;
  width: 200px;
  margin: 10px;
  background-color: white;
  box-shadow: 5px 5px 5px;
  overflow: hidden;
}

.flexbox-item-1 {
  min-height: 300px;
  min-width: 300px;
  border: 3px solid red;
  overflow: hidden;
}

#Aries_pic_1 {
  height: 300px;
  width: 300px;
  inline-size: 100%;
  object-fit: cover;
}

<html>

<div >

  <div >

    <div> <a href="Aries_page.html"  target="_blank">

        <img src="https://cf.ltkcdn.net/horoscopes/images/orig/239601-1600x1030-aries-
     constellation.jpg  " id="Aries_pic_1">

      </a>

    </div>

  </div>

</html>

CodePudding user response：

Adding display:block on img will resolve the issue. Like so :

.flexbox-item_one {
  display: inline-block;
  width: 200px;
  margin: 10px;
  background-color: white;
  box-shadow: 5px 5px 5px;
  overflow: hidden;
}

.flexbox-item-1 {
  min-height: 300px;
  min-width: 300px;
  border: 3px solid red;
  overflow: hidden;
}

#Aries_pic_1 {
  height: 300px;
  width: 300px;
  inline-size: 100%;
  object-fit: cover;
}

img {
  display:block;
}

<html>

<div >

  <div >

    <div> <a href="Aries_page.html"  target="_blank">

        <img src="https://images.unsplash.com/photo-1648737155328-0c0012cf2f20?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw=&auto=format&fit=crop&w=500&q=60" id="Aries_pic_1">

      </a>

    </div>

  </div>

</html>

CodePudding user response：

I would use flex for this.

Seeing as you have appled min-width and min-height on flexbox-item-1, I suspect you want responsive sizing on the image - using fixed values for this will not let you do that.

display: flex on the container element will automatically make the second container div take up the remaining space, as well as the a-element. Applying max-width: 100% makes sure the img never overflows out of the container. Apply height: 100% and object-fit: cover and voila, you got a fully responsive container with an img-element inside.

.flexbox-item_one {
  display: inline-block;
  width: 200px;
  margin: 10px;
  background-color: white;
  box-shadow: 5px 5px 5px;
  overflow: hidden;
}

.flexbox-item-1 {
  min-height: 300px;
  min-width: 300px;
  border: 3px solid red;
  overflow: hidden;
  display: flex;
}

#Aries_pic_1 {
  max-width: 100%;
  height: 100%;
  object-fit: cover;
}

<html>

<div >

  <div >

    <div>
      <a href="Aries_page.html"  target="_blank">

        <img src="https://www.fillmurray.com/640/360" id="Aries_pic_1">

      </a>

    </div>

  </div>

</html>