背景图像超出移动屏幕大小的内容

Question

我设计了一个响应式网站。我在一些网页中使用了固定的背景图像。问题是，在移动屏幕上，图像没有响应，它超出了边界（内容）。 .. 我用谷歌搜索了一个原因，但我发现的唯一方法是将图像转换为 wbmp 格式。

当我将图像转换为 wbmp 时，html 根本不接受。 .. 任何想法让图像以响应方式显示在小屏幕上？
或者我应该使用的任何工具？

css

body{
    background:url(../images/gallery-1-big.jpg) center center fixed no-repeat;
    background-size:cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -webkit-backface-visibility: hidden;
opacity: 0.8;
}

移动屏幕的同一段代码让图像失真，当我尝试下面的代码时，图像显示但仅显示在屏幕的上半部分

@media (max-width: 480px) {
body
{
    background:url(../images/gallery-1-big.jpg)  fixed no-repeat;
    background-size:100%;

}

Answer 1

你需要给css中的图片指定width:100%和height:100%...

body
{
   background: url(img_flwr.gif);
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

Answer 2

这应该可以解决问题：

body {
background: url(background-photo.jpg) center center cover no-repeat fixed;}

重要的部分是背景尺寸：封面；它告诉浏览器按比例缩放图像。 这取决于您使用的图像。

如果您的图像宽于高，则它将超出智能手机的边界，该智能手机以纵向模式保存...... 当然还有其他方式，如果您的图像比宽高，它可以在纵向模式下正确显示，但在横向模式下会出现问题......

是否使用 jpg 或 png 取决于您。看看图片有多大，选择尺寸小的格式。

Answer 3

在这里你可以检查兼容的image formats。我认为背景图像最好使用png格式。

如果你有你的图片作为背景，你应该将backgroud-size设置为cover或100%。

你可以看看这个website，里面有很好的例子。

编辑

好的，我制作了这个fiddle 来向您展示正在发生的事情。当您使用图像作为背景时，它们可以响应，但如果您想要完美契合，则需要图像与其容器具有相同的比例，在您的情况下为body。如果图像具有相同的纵横比，background-size:100% 一切正常。

当它们的比例不同时，问题就来了。如果您使用background-size:100%，图像将适合一个维度（宽度或高度）但不能同时适合两个维度，因为这会使图像拉伸或扩展，从而使图像变形。要解决这个问题，您可以使用background-size:cover，这将使图像填满所有body，但可能会隐藏图像的某些部分以获得完美契合。

Answer 4

我只是错过了这段代码。我将它放在我的 CSS 顶部并删除了媒体查询，我的问题得到了解决

html, body {
    height:100%;
}