Home >Web Front-end >CSS Tutorial >How Can I Achieve CSS `background-size: cover` Behavior with HTML Image Elements?

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

Patricia Arquette
Patricia ArquetteOriginal
2024-12-17 19:46:13935browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn