How Can I Fit a Background Image to a Div Without Cropping?

Fitting Background Images to Divs

To display a background image within a div without cropping it, utilize the background-size property. Depending on your intended result, you can choose to scale the image to fit within the div or to cover the entire div.

Scaling the Background Image to Fit the Div

If you wish to scale the background image such that it remains fully visible within the div, set the background-size property to contain.

background-size: contain;

Scaling the Background Image to Cover the Div

Alternatively, if you want the background image to cover the entire div, use the background-size property set to cover.

background-size: cover;

Examples

Below are some examples to illustrate the effects of these settings:

<div>

• With background-size: contain;, the image will scale down to fit within the div, preserving its aspect ratio.
• With background-size: cover;, the image will be stretched to cover the entire div, potentially distorting its aspect ratio.

The above is the detailed content of How Can I Fit a Background Image to a Div Without Cropping?. For more information, please follow other related articles on the PHP Chinese website!