How Can I Achieve CSS `background-size: cover` Behavior with HTML Image Elements?

Cover and Contain Images with HTML Elements

CSS's background-size: cover and contain properties provide flexible image scaling for backgrounds. However, what if you want similar control over images displayed using HTML elements? Here's how:

Solution 1: The object-fit Property

The object-fit property allows you to specify how an image fits within its container. Setting it to cover replicates the behavior of background-size: cover, scaling the image to fill the entire container while preserving the aspect ratio.

img {
  object-fit: cover;
}

Note: IE does not support object-fit.

The above is the detailed content of How Can I Achieve CSS `background-size: cover` Behavior with HTML Image Elements?. For more information, please follow other related articles on the PHP Chinese website!