.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>Usar object-fit: cover; estilo CSS. Asegúrese de establecer el ancho y el alto en la imagen para que funcione.
<!-- 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>Luego simplemente coloque el div de todos modos y ajústelo a lo que quiera.