object-fit
property
CSS3
Specifies how an <img> or <video> should be resized to fit its container.
Syntax
object-fit: fill | contain | cover | none | scale-down;
Example
css
.avatar {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover; /* fill and crop */
object-position: top; /* anchor to top */
}
.contain-img {
width: 200px;
height: 200px;
object-fit: contain; /* fit inside, letterbox */
}