问background-size min() min()；适用于chrome，但不适用于firefox或Edge
EN

Stack Overflow用户

提问于 2020-04-10 18:23:08

回答 1查看 23关注 0票数 0

我刚刚开始开发一个新的网站，并且已经在不同的浏览器上遇到了麻烦。

我有以下几行css来设置背景图片：

body
{
    background-image: url("../Images/Background.jpg");
    background-repeat: no-repeat;
    background-size: max(100vw, 1920px) max(100vh, 876px);

}

这在Chrome中运行良好，但不适用于Firefox或Edge的背景大小。在Firefox检查器中，它显示“无效的属性值”。

你周围有什么工作吗？我希望图像拉伸到窗口大小，但如果窗口较小，则将其大小保持在其分辨率。我不能使用min-height，因为即使没有内容，它也会拉伸窗口。

谢谢!

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-04-10 18:33:34

您可以使用伪元素来模拟：

html:before {
  content: "";
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  background: url("https://i.picsum.photos/id/1074/800/800.jpg") center/cover no-repeat;
  min-width:800px;
  min-height:800px;
  width:100vw;
  height:100vh;
}

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61138293

复制

相似问题

问background-size min() min()；适用于chrome，但不适用于firefox或Edge
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问background-size min() min()；适用于chrome，但不适用于firefox或EdgeEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问background-size min() min()；适用于chrome，但不适用于firefox或Edge
EN