html - 确保图像被缩小

Question

我在网页上显示一些图像作为背景，但图像并未完全“缩小”显示。相反，它仅以左侧为例。

如何让图片完整显示？跟分辨率有关吗？

#kitchenimage{
      width:100%;
      background: url("siteimages/kitchenimage.jpg") no-repeat center fixed;
      padding:200px 0;
}

图像为 3249 x 1679。

谢谢。

Answer 1

根据偏好的选项，定义以下内容之一:

background-size: cover;
background-size: 100% 100%;
background-size: contain;

第一个将背景图像缩放到尽可能大，以便背景区域完全被背景图像覆盖，在保持宽高比的同时裁剪背景的某些部分。
第二个不会保持宽高比，并且会在不进行任何裁剪的情况下覆盖背景。
第三个将图像缩放到最大尺寸，使其宽度和高度都能适应背景区域。