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

我有

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

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

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

我知道我可以使用上面的CSS规则强制

#interior photo

的内容水平滚动，但这似乎只有在同一个div具有固定宽度时才起作用。由于我希望该div具有一个可变宽度，因此它似乎总是显示图像的全宽，使我的布局变得异常

---

我知道如何使用Javascript解决这个问题，但我想知道是否有人有一个CSS专用的解决方案。如果你需要更多关于我的布局的信息来解决这个问题，请让我知道。谢谢

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

事实上，有一种方法可以解决这个问题。您可以指定使用滚动条显示图像，从而将可视部分限制为

div

的大小。基本上，图像将扩展到

div

的大小，如果水平图像大小超过

div

的水平大小，则会有一个水平滚动条。如果图像的垂直分量超过

div

，则不会显示滚动条。您可以使用

溢出

声明将x和y设置为溢出时滚动。但是，为了使用其中任何一种，必须通过某种方法控制

div

的大小，即使是通过初始声明

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

---

事实上，这是有办法的。您可以指定使用滚动条显示图像，从而将可视部分限制为

div

的大小。基本上，图像将扩展到

div

的大小，如果水平图像大小超过

div

的水平大小，则会有一个水平滚动条。如果图像的垂直分量超过

div

，则不会显示滚动条。您可以使用

溢出

声明将x和y设置为溢出时滚动。但是，为了使用其中任何一种，必须通过某种方法控制

div

的大小，即使是通过初始声明

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

---

如果滚动条总是显示，可以吗？您是否尝试过“overflow-x:scroll”我更喜欢滚动条不总是显示。无论如何，这也不行；图像仍处于全宽（非限制）。还有其他想法吗？如果滚动条总是显示，可以吗？您是否尝试过“overflow-x:scroll”我更喜欢滚动条不总是显示。无论如何，这也不行；图像仍处于全宽（非限制）。还有其他想法吗？我担心这就是答案。没有别的办法了？我担心这就是答案。没有别的办法了？