CSS中background-size的cover和100% auto有什么区别?

5

如何区分background-size: coverbackground-size: 100% auto

我已经尝试了两种方式,它们看起来一样...

那么我们应该使用哪一个,为什么?


如果您能够发布一个小的实时示例(请参见下面的评论),我可以尝试创建另一种替代方案... - Shikkediel
1个回答

3
区别在于宽高比。当使用“cover”时,不管图片的比例如何,都会填满整个屏幕。但是当使用“100% auto”时,如果屏幕相对于图像本身较高,则会在底部留下空白空间(假设它位于顶部且没有重复)。要看到效果最好的方法是,在至少具有300像素高度的内容窗口的屏幕上查看笔记本电脑(在其他情况下需要调整大小)。无法找到全页面视图了...请参考Cover100% auto

如果我无法使用 cover,因为我正在使用 :50% auto,有什么方法可以防止出现空白的空间。 - Debajyoti Das
我认为有几种解决方法...主要是使用媒体查询和JavaScript。当然,这两种方法都不像使用cover那样简单。然后还有image-set,但它似乎主要用于针对分辨率进行定位,并且缺乏深度支持。这里有一个描述选项的不错的线程:http://tinyurl.com/qxs6jey。 - Shikkediel

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接