CSS：在可变宽度div内水平滚动图像？答案

【问题标题】：CSS: Horizontally scrolling image inside variable width div?CSS：在可变宽度div内水平滚动图像？
【发布时间】：2010-04-20 19:41:26
【问题描述】：

我有……

<div id="tabs">
  <!-- ... -->
  <div id="interior-photo">
    <img src="...">
  </div>
  <!-- ... -->
</div>

...和...

#interior-photo { overflow-x: auto; }

基本上，我将页面分解为主要部分和固定宽度的右侧边栏。在主要部分中，我有我的选项卡式 div。整个页面随着窗口的宽度而增长，所以当窗口调整大小时，选项卡式 div 的大小也会水平增长。

我的问题是，我在其中一个选项卡式 div 中加载的图像通常比窗口通常宽得多（它们是全景图片；水平方向很长，但垂直方向不大）。

我知道我可以使用上面的 CSS 规则强制 #interior-photo 的内容水平滚动，但这似乎只有在同一个 div 具有固定宽度时才有效。由于我希望该 div 具有可变宽度，因此它似乎总是显示图像的整个宽度，从而使我的布局变得异常。

我知道如何使用 Javascript 解决此问题，但我想知道是否有人有纯 CSS 解决方案。如果您需要有关我的布局的更多信息来解决此问题，请告诉我。谢谢！

【问题讨论】：

滚动条一直显示可以吗？你试过“溢出-x：滚动”
我希望滚动条不总是显示。无论如何，这也不起作用；图像仍为全宽（不受限制）。还有其他想法吗？

标签： css html

【解决方案1】：

除非您的目标 div 受固定宽度样式的限制或受具有固定宽度的容器或其祖先包含固定宽度的容器限制，否则您将无法将目标 div 设置为获取滚动条。它的宽度将与其内容一样宽，并且浏览器滚动条将接管。

【讨论】：

我担心这就是答案。没有其他办法了吗？

【解决方案2】：

实际上，有办法解决这个问题。您可以指定使用滚动条显示图像，从而将可视部分限制为div 的大小。基本上，图像会扩大到div的大小，然后如果水平图像大小超过div的水平大小，就会有一个水平滚动条。如果图像的垂直分量超过div，则不会显示滚动条。您可以使用 overflow 声明将 x 和 y 设置为在溢出时滚动。然而，为了使用其中的任何一个，div 的大小必须通过某种方式来控制，即使是通过初始声明。

#interior-photo { overflow-x: scroll; }

【讨论】：