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

Question

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

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

}

这对少数图片非常有效，但对其他图片却不行，如果图片具有相同的尺寸，那怎么可能呢？我尝试做 background-size: cover ，它工作了一段时间，但随后它会切断 img，所以到目前为止最好的方法是我上面写的那个。我说的是从 1440 像素到 2560 像素的大屏幕尺寸。非常感谢

您可以在此处查看 headers：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。它可以修复你的 issue.if 你使用 backstretch js 调用你的背景图片然后它会根据你的屏幕自动调整你的图像，无论你的图像分辨率是多少

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

same dimensions pictures but displayed different !!! Why?

html

css

responsive