Is there a way to make an image adjust its size according to the container?
For example, if the container is 100x100 pixels and the image within it is 90x80 pixels, can we make sure that the smaller property of the image (height in this case) adjusts to fit the container size while the larger property overflows beyond the container boundaries.
If so, how can this be achieved?
Here's some sample code I have provided:
HTML
<div class="a-avatar">
<img src="#" alt="profile picture">
</div>
CSS
.a-avatar {
display: block;
width: 100px;
height: 100px;
}
.a-avatar img {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}