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

Question

我有......

<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解决方案。如果您需要有关我的布局的更多信息来解决此问题，请告诉我们。谢谢！

Answer 1

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

Answer 2

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

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