如何使用 CSS 使背景图像完美适合 Div？

将背景图片适配到 Div

在 div 中放置背景图片时，经常会遇到图像被剪切的问题关闭或不合适。为了解决这个问题，CSS 提供了 background-size 属性，可以精确控制背景图片的缩放和定位。

缩放背景图片以适合 Div 内部

为了确保背景图像显示在div的边界内而不进行任何裁剪，请将background-size属性设置为包含：

background-size: contain;

缩放背景图像以覆盖整个 Div

或者，要使背景图像占据整个 div，请使用 cover 对其进行缩放：

background-size: cover;

视觉演示

考虑以下带有包含背景图像的div的HTML代码：

<div>
<p>要防止图像被截断，请应用background-size属性：</p>
<pre class="brush:php;toolbar:false">#mainpage {
  background-size: contain;
}

或者，让图像覆盖整个 div：

#mainpage {
  background-size: cover;
}