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

我有...CSS：水平滚动可变宽度div内的图像？

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

来源

2010-04-20 neezer

是不是好，如果滚动条一直显示？你有没有尝试“overflow-x：scroll” – KTastrophy 2010-04-20 19:43:53

如果滚动条并不总是显示，我更喜欢。无论如何，这也不管用;图像仍然是全宽（非限制）。任何其他想法？ – neezer 2010-04-20 19:56:44

除非您的目标div受固定宽度样式或的限制，其宽度固定或祖先包含固定宽度的容器，否则您将无法获得目标div以获取滚动条。它会像内容一样宽泛，浏览器滚动条将接管。

来源

2010-04-20 20:08:02 Robusto

我担心这会是答案。有没有其他方法呢？ – neezer 2010-04-20 21:53:51

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

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

来源

2015-01-03 03:18:22 andrewgu

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

回答

相关问题