html - 防止移动浏览器显示内容边界之外的元素？

Question

为了说明我的问题，请看下面的 fiddle :http://jsfiddle.net/ECaD6/

假设我制作了这个网页，其中中心(深灰色)区域是页面的主要内容。此内容区域的背景故意与不包含任何内容的容器侧面的颜色不同。

我绝对放置了一张图片，因此它位于预期内容区域的边界之外。这在桌面浏览器上有效且看起来不错。

但是，当在移动浏览器中查看时，用户可以缩小页面以便他们看到:

我希望浏览器只能缩小到与内容容器一样宽。这可能吗？我显然可以在 div 上放置一个 overflow-x:hidden 但实际上它会完全切断足球。

如果移动浏览器只能缩小这么远就好了:

我知道从技术上讲图像(在本例中)是“内容”的一部分，因为它位于内容 div 中。我想知道是否有任何布局或 css 技巧可用于实现我正在寻找的东西。

Answer 1

你有没有添加一个meta device-width标签到你的标题？