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

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 class="flexbox-container">

  <div class="flexbox-item_one flexbox-item-1">

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

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

      </a>

    </div>

  </div>

</html>
htmlcss


Solution 1:[1]

As you set up your styles, adding display:block on your 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;
  display: block; /* line I added */
}
<div class="flexbox-container">
  <div class="flexbox-item_one flexbox-item-1">
    <div>
      <a href="Aries_page.html" class="Get_1" target="_blank">
        <img
          src="https://images.unsplash.com/photo-1648737155328-0c0012cf2f20?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60"
          id="Aries_pic_1"
        />
      </a>
    </div>
  </div>
</div>

Solution 2:[2]

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 class="flexbox-container">

  <div class="flexbox-item_one flexbox-item-1">

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

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

      </a>

    </div>

  </div>

</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Sigurd Mazanti

Related Questions