确保图像缩小

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;

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