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

Fit Background Image to Div

Issue:
A background image is being cut off within a div. The desired outcome is to display the entire image without cropping.

Solution:

To retain the background image's integrity within the div, utilize the background-size property. This property dictates how the image scales relative to its container.

By employing the following values, you can achieve your intended result:

• Contain: Scales the image to fit within div, maintaining its aspect ratio.
• Cover: Scales the image to cover the entire div, potentially cropping parts of the image.

Code Examples:

Contain:

background-size: contain;

Cover:

background-size: cover;

Note: The background-size property is supported by most modern browsers.

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