Issue
I want my 3 images to be the same size, but width/height styles aren't helping, because when I set the same size for all images, all 3 images keep their aspect ratio and they look horrible.
.social {
display: flex;
}
.items_soc {
height: auto;
width: 50px;
object-fit: cover;
/* filter: brightness(0%) invert(100%); */
}
<div class="social">
<img class="items_soc" src="https://via.placeholder.com/100x150" />
<img class="items_soc" src="https://via.placeholder.com/150x150/aaa" />
<img class="items_soc" src="https://via.placeholder.com/150x100" />
</div>
Solution
Object fit works the best when you have a constant aspect ratio. Change the code to
.social {
display: flex;
}
.items_soc {
height: 50px; /* Set the desired height */
width: 50px; /* Set the desired width */
object-fit: cover;
/* filter: brightness(0%) invert(100%); */
}
<div class="social">
<img class="items_soc" src="https://via.placeholder.com/100x150" />
<img class="items_soc" src="https://via.placeholder.com/150x150/aaa" />
<img class="items_soc" src="https://via.placeholder.com/150x100" />
</div>
Answered By - Maximus Duke
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.