0

我正在创建一个使用 CSS3 全屏画廊的网站。这是我第一次将 CSS3 用于全屏图像，而不是 JS。

问题是我正在使用的 background-size:cover 属性没有做我认为应该做的事情。我认为通过使用封面，图像由浏览器调整大小，但它保持原始纵横比，因此没有任何内容被剪裁，但这没有发生。

例如，如果我在 1366x768 分辨率上使用 1500x900 图像，则图像未正确缩放，它覆盖了所有内容，但它会切断其中的一部分，因为提供的图像大于分辨率。

这是我用于 bg 图像的代码：

   .image{
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; 
 }

此外，这里是网站测试页面： http: //www.madebym.net/test/index.html 只需比较缩略图和更大的图像。

谢谢

4

2 回答 2

2

你可能想要包含

包含，它指定背景图像应该被缩放到尽可能大，同时确保它的两个尺寸都小于或等于背景定位区域的相应尺寸。

cover，它指定背景图像在保证两个尺寸都大于或等于背景定位区域对应尺寸的情况下，应尽可能缩小。

来自MDN

于 2012-08-22T00:49:26.993 回答
0

contains和cover保持图像的纵横比正确，这意味着它的一部分可能会丢失或部分区域将未被覆盖（如果块的纵横比恰好与图像的纵横比不匹配）。如果您希望图像完全填充块而不考虑纵横比，您想要的只是：

image-size: 100% 100%
于 2013-04-23T11:53:49.617 回答