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內的圖像？

回答

相關問題