.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>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.