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

Question

我有...

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

...和...

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

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

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

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

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

Answer 1

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