Resize images and videos to fill their parent and maintain their aspect ratio with pure CSS. The new object-fit and object-position properties allow you to scale images and videos, much like you could with background-size and background-position.

img {  width: 90vw;  height: 75vh;  border: 3px solid tomato;}.img-con1 img{    object-fit: fill;}.img-con2 img{  object-fit: contain;}.img-con3 img{        object-fit: cover;}.img-con4 img{  object-fit: none;}.img-con5 img{  object-fit: scale-down;}.img-con6 img{  object-fit: fill;  object-position: 20px 5px;}/* Demo styles only */* {  box-sizing: border-box;}body {  margin: 0;}

<iframe style="width: 100%; height: 500px;" src="https://embed.plnkr.co/gwACXqvA4baVo4DkTedB/" width="320" height="240"></iframe>

[CSS] Control Image Aspect Ratio Using CSS