Question: Suppose a div box has a width of 1000px, a height of 800px, and an img image with a width of ..
img{ width:100%; height:100%; object-fit: cover; }
object-fit
fill : When the element size does not match the container, the element will be stretched to fill the entire container. This may cause the aspect ratio of the element to be changed. contain : When the element size is larger than the container, the element will be scaled to fit the container and maintain its original width height ratio. When the element size is smaller than the container, the element is displayed in its original size. cover : When the element size is smaller than the container, the element will be enlarged to fill the container and maintain its original width height ratio. When the element size is larger than the container, the element will be trimmed to fit the container. none : The element is displayed in its original size, ignoring the size of the container. scale-down : When the element size is larger than the container, the element will shrink to fit the container and maintain its original width height ratio. When the element size is smaller than the container, the element will be displayed in its original size (equivalent to none ）。
.container { width: 200px; height: 200px; border: 1px solid black; } .image { width: 100%; height: 100%; object-fit: contain; }