问题标签 [background-size]

我正在使用带有内置延迟加载功能的 slick.js 轮播来显示全屏图片库。我遇到的一个问题是惰性加载器仅使用 img 标签显示，因此我无法对其应用 background-size:cover 并且我不想通过使用 js 插件使其全屏显示来过度杀伤它。有没有人有任何想法？

我试图在悬停时在我的背景图像上放置一个过渡。到目前为止，这是我的代码：

HTML

CSS

见 JSFIDDLE

但这对我不起作用，在不同的浏览器中测试过。背景颜色等其他转换按预期工作。此属性的转换是否有任何限制？

当background-size: 100%;使用时，我得到了我想要的行为，但我不明白为什么当我尝试background-size: contain;我的 Chrome 浏览器时，图像显示在角落里，只有浏览器窗口宽度的 20% 左右。Firefox 也是如此。

www.moonwards.com

为什么会这样？CanIuse说这些浏览器不应该有这个问题。

我的页面主体上有一个背景图像，应该垂直和水平居中并覆盖画布。

在 Chrome/Firefox 和所有移动浏览器中，图像垂直和水平居中并覆盖画布。在桌面版 Safari 中，图像略低于垂直中心。我做错了什么或者这可能是浏览器错误吗？

这个直播网址是： http: //moonios.com

我已经尝试删除溢出：无以及删除页面的其他内容，但问题仍然存在。

如果您有任何建议或可以确认此错误，我将不胜感激。谢谢！查理

更新：做了更多的工作来解决这个问题。用网格构建这个新页面： http ://whyamicrazytoday.com/safari/

整个页面内容为：

仍然只在 Safari 中重现。

然后我想起了 Safari 导航栏中的半透明效果（虽然我把它关掉了）。我相信 Safari 正在考虑用正文区域来覆盖顶部导航栏，这会导致我的垂直居中偏离，因为没有以这种方式考虑页面的内容。有没有办法从dom禁用这种效果？

我有以下问题：我的网站有一个全屏图像滑块，它是响应式的。图像大小始终适应窗口大小。我的解决方案如下：

问题是在加载页面时，您可以在滑块位置看到页面的其他内容。原因是页面加载时图片容器没有宽度。宽度是根据图像宽度计算的。为了更好地理解：我正在加载页面，然后一会儿我可以在顶部看到 div 内容，然后加载滑块，内容位于滑块下方的位置。

有没有人有办法解决吗？

提前致谢！

如何显示背景图像，无论设备屏幕是什么，都将显示图像的相同部分？

我当前的代码：

但是在较小的屏幕设备上，背景被吃掉了，只显示了很小的一部分。

The code:

I'm not sure why the Google Maps iframe is not covering the entire screen when i click on the button. I have set the iframe to background-size: cover; to cover up the whole screen once i have clicked on the button. Can someone help me with this? Thanks.

使用以下 CSS 样式时，图像完全覆盖 div，同时保持其比例：

问题是我需要使用 PHP 生成图像 URL，因此我无法在 CSS 属性中指定它。

我不喜欢使用 jQuery、JavaScript 或内联 CSS。我之后的代码如下所示：

PHP

CSS

我已经设置了我的背景图像 (1280 x 853)，但这并不适合屏幕。

我该如何解决？

如果我正在使用，当浏览器大小发生变化时，如何消除空格background-size:contain;？

对于较小的浏览器尺寸，图像和文本之间的空白太多了。网站是：http: //16debut.com/test.html

CSS是：