'How can I fit a img into a div wholly?

.flexbox-item-1 {
  min-height: 300px;
  min-width: 300px;
  border: 3px solid red;
  overflow: hidden;
  /* background: url("./Zodiac_Logos_jpg/Aries_zodiac_logo.jpg"); */
  /* background-size: cover; /* fits the whole image inside */
}

#Aries_pic_1 {
  /* position: absolute; */
  /* left: 67.5px; */
  max-height: 100%;
  max-width: 100%;
}
<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="./Zodiac_Logos_jpg/Aries_zodiac_logo.jpg" id="Aries_pic_1">
      </a>
    </div>
  </div>
</div>
javascripthtmlcss


Solution 1:[1]

Use object-fit: cover; css style. Make sure to set width and height on the image for it to work.

<!-- you can set the height to whatever you like, even make it a flex item. -->
<div style="width: 200px; height: 100px;">
   <style>
     .my-image {
       width: 100%;
       height: 100%;
       object-fit: cover;
     }
    </style>

 <img class="my-image" src="your-image.extension" />

</div>

Then just put the div anyway and size it to whatever you want.

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

Related Questions