确保图像缩小

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; 

第一个将缩放背景图像，使得背景区域由背景图像完全覆盖要尽可能地大，而使在保持宽高比的同时，背景的某些部分会被裁剪。
第二个不会保持高宽比，并且会覆盖背景而没有任何裁剪。
第三种方法会将图像缩放到最大尺寸，使其宽度和高度均可适合背景区域。