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

【问题标题】：image not stretched on mobile devices caused horizontal scroll图像未在移动设备上拉伸导致水平滚动
【发布时间】：2015-03-31 15:19:02
【问题描述】：

我有一个链接的网页：

Click Here

在 PC 或 MAC 上一切正常。问题是如果您在移动设备上查看它，您会发现这 3 个图像导致了水平滚动条。

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

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

我使用 sprite 方法设置 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;
    }

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

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

任何人给我一些启发将不胜感激！

【问题讨论】：

标签： html css mobile responsive-design

【解决方案1】：

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

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

这应该可以解决问题。

但是，如果您真的想使用 div / 背景图像方法，事情会稍微复杂一些。

.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 中不起作用。

【讨论】：