Question

我有一个链接的网页：

PC或MAC上的一切都很好。问题是，如果你在移动设备上查看它，你会发现3个图像导致水平滚动条。

我用它来设置移动设备考虑的视口：

<meta name="viewport" content="width=device-width, initial-scale=1.0, target-densitydpi=320, maximum-scale=1.0, user-scalable=no">

我使用精灵方法来设置div背景，以显示3张图像。

HTML：

<div class="demopic" id="category"></div>

CSS：

.demopic {
      text-align: center;
      margin: 10px auto;
      background: url(http://7te8e7.com1.z0.glb.clouddn.com/sprite_instructions.png);
    }

#category {
      width: 560px;
      height: 590px;
    }

我的问题是，根据我的情况，是否有快速修复以实现响应式图像？我不想在移动设备上显示水平滚动条。

如果我删除initial-scale=1.0中的<meta name="viewport" content="width=device-width, initial-scale=1.0, target-densitydpi=320, maximum-scale=1.0, user-scalable=no">，图片将被压缩为适当的大小，但同时也会调整字体大小。

任何给我一些灵感的人都将受到高度赞赏！

Answer 1

我认为你最好的选择是使用标准的img标签，并确保图像永远不会比它的父容器扩展得更宽（可能只是主体元素）。

.my-image {
    max-width:100%;
    height:auto;
}

这应该可以解决问题。

但是，如果你真的想使用div / background图像方法，那么事情会稍微复杂一些。

.my-background-image {
    width:100%;
    height:0;
    padding-bottom:50%;
    background:url(img.png) no-repeat center center;
    background-size:100% auto;
}

这里我们设置一个元素来填充它的父母宽度。然后我们使用padding-bottom使它的高度与它的宽度成正比（你需要调整它）。最后，我们使背景大小始终填充元素。值得注意的是，背景尺寸在IE8中不起作用。

图像未在移动设备上拉伸导致水平滚动

1 个答案: