Object-fit
Object-fit provides us cover
and contain
control which is similar to background-size
. The difference is that background image is a decoration that happens in CSS. Object-fit, on the other hand, applies to <img> tag. An img tag is treated as content and hence it keeps the accessibility.
figure {
padding: 5px;
img {
width: 100%;
height: 200px;
object-fit: cover;
}
figcaption {
text-align: center;
}
}