html - 图片未在移动设备上拉伸(stretch)导致水平滚动

Question

我有一个链接的网页:

Click Here

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

我用它来设置视口(viewport)以考虑移动设备:

<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;
    }

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

如果我删除 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 标签，并确保图像不会扩展到比它的父容器更宽(可能只是 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 中不起作用。