Question

我必须根据屏幕尺寸设置4页，宽度和高度为100％背景。 imgs有相同的宽度和高度，这些是我的设置，

.fullImg{
width: 100%;
height: auto;
max-height: 100vh;
max-width: 100vw;

}

这适用于少量图片，但不适用于其他图片，如果图片尺寸相同，那怎么可能呢？我试图做背景大小：封面哪个工作了一段时间但是它会切断img所以到目前为止最好的方法就是我上面写的那个。我说的是从1440px到2560px的大屏幕尺寸。非常感谢

您可以在此处查看标题：http://provaresponsive.herokuapp.com/pr.html

Answer 1

如评论中所述，如果您希望图像始终使用所有可用的高度和宽度，那么您必须决定：您是否希望图像保持其纵横比 - 然后必须裁剪，或者您想要要改变宽高比的图像，在这种情况下它会拉伸。

以下是每个选项的示例：

没有拉伸 - 会裁剪

html { 
  background: url(http://www.olejarz.com/arted/perspective/images/intro.gif) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

jsfiddle

拉伸 - 无裁剪

div { 
 background-image:url(http://www.olejarz.com/arted/perspective/images/intro.gif);
 /* 
  * Width & Height can be percetages only when the parent 
  * element has explicitly declared dimensions.
  */
  height:200px; 
  width:500px;
  -moz-background-size:100% 100%;
  -webkit-background-size:100% 100%;
  background-size:100% 100%;
}

jsfiddle

还有第三个选项，你可能不喜欢，包含图像，所以：

没有拉伸，没有裁剪 - 没有填充x / y

html { 
  background: url(http://www.olejarz.com/arted/perspective/images/intro.gif) no-repeat center center fixed; 
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
}

jsfiddle

Answer 2

使用backstretch js .it可以解决您的问题。如果您使用backstretch js调用背景图像，那么无论您的图像分辨率如何，它都会根据您的屏幕自动调整图像

相同尺寸的图片，但显示不同！为什么？

2 个答案: