Images and videos can be resized the same way that background images can be resized. Videos can maintain their proportion in what is a boon for responsive design. The object-fit and object-position properties define how an element responds to the height and width of its content box. The object-fit property implements cover and contain to determine the size of an image based on its longest or shortest length. There is also a scale-down value that keeps an image in proportion as it is resized (think video). The object-position property allows placement of the image in the box. The default is 50% 50% which centers the image. In the following demo, the images is enlarged to fill the box using cover, pinned to the left side center. The image will resize proportionally with a change in the box’s size.
CSS Code View
Video
It is important to keep video ratio in proportion. Previous hacks used percentage based bottom padding of the parent container’s width and stretched the video to that ratio. It’s now possible to specify contain or scale-down.