Question

如图所示，我的网页的背景图片适合chrome，但由于某些原因，即使窗口大小相同，图像也无法在Firefox中正确缩放。更糟糕的是，当我缩小窗口宽度时，它根本不能很好地扩展。我怎么知道有人正在使用的浏览器的窗口大小？

这里是图片更新。首先是chrome，第二个是firefox

https://www.flickr.com/photos/125343138@N07/24491082235/in/dateposted-public/

https://www.flickr.com/photos/125343138@N07/24464890356/in/dateposted-public/

这是样式表

.nav {

list-style-type: none;
margin: 0;
padding: 0;
width: fill;
overflow: hidden;
background-color: #333;
}

.nav li {

display: inline;
padding: 20px 10px;    
}

.nav li a {

color: whitesmoke;
padding: 14px 190px;
font-family: 'futura';
font-size: 16px;
position: relative;
top: 5px;

}

.jmb {

background-image: url('https://farm2.staticflickr.com /1600/24149223706_da584c8c45_o.jpg');
height: 100%;
width: 100%;
position:absolute;
background-repeat: no-repeat;
background-size:contain;
background-position: 00px 37px;
}

.jmb h5 {

  font-family: 'Yellowtailregular';
  font-size: 105px;
  color: black;
  margin-top: 170px;
  margin-left: 190px;
  -webkit-animation-delay: 1s;
  -webkit-animation-duration: 4s;

}

.jmb div p
{
font-size: 27px;
font-family: 'futura';
margin-left: 110px;
margin-top: -24px;
word-wrap: break-word; 
width: 27%;
-webkit-animation-delay: 2s;
-webkit-animation-duration: 4s;    

}

Answer 1

从技术上讲，根据您的指标以及您对人口统计的了解，您只会真正了解用户使用的浏览器尺寸。我会从一些小的东西开始，然后逐步扩大，直到达到那么大的桌面尺寸。

AMACB对webkit支持是正确的，因此您的某些代码可能需要使用moz前缀才能正常工作。你可以在这里找到有关支持的文档：

https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_support_chart

就覆盖整个指定区域而言，我没有看到实时链接，但我的第一个建议是试试这个：

background-size: cover

这应该拍摄图像并将其映射到其所在对象的大小，尽管您可能无法获得正确的宽高比。那就是你可能会考虑使用媒体查询和/或不同的图像或不同的定位来改变其显示方式。请务必检查您的标记，以确保页面边框上没有对象，以防止图像到达终点。

网页在Chrome中正确显示，而不是在firefox

1 个答案: