結合溢流y：自動和溢流x：可見

Question

我在這里已經閱讀了很多有關合並不同的溢出值的問題。 但是，找不到以下問題的解決方案。

我有一個圖像，它大於它的容器。 因此，我想使其在x方向上可見，並在y方向上滾動（或自動）。

一種可能的解決方案是增加#inner的寬度，使其等於圖像寬度，但是我不允許這樣做。 我試圖插入一個包裝器（#outter），但是沒有用。

有人想要解決問題嗎？

 #outter { width: 200px; height: 200px; overflow-y: scroll; } #inner { overflow-x: visible; width: 200px; height: 200px; } img { width: 400px; height: 400px } 

 <div id="outter"> <div id="inner"> <img src="http://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com"> </div> </div> 

Answer 1

您可以使用包裝器元素並將其浮動到左側，這將使它脫離正常的文檔流。 然后，此浮動元素將與其內容一樣大，這將使您獲得x軸拉伸/溢出，但不能獲得y軸滾動。 要獲取y軸滾動，請在浮動包裝器上設置高度和溢出控件。

 /* Micro Clearfix - http://nicolasgallagher.com/micro-clearfix-hack/ */ .cf:before, .cf:after { content: " "; /* 1 */ display: table; /* 2 */ } .cf:after { clear: both; } .container { width: 200px; /* Following two properties, for demo, so you can see the container. */ min-height: 400px; background-color: pink; } .img-wrap { float: left; height: 200px; overflow-y: scroll; } img { width: 400px; height: 400px; } 

 <div class="container cf"> <div class="img-wrap"> <img src="http://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com"> </div> <p> Lorem ipsum dolor. </p> </div> 

Answer 2

您可以將圖像位置設置為絕對位置，這將使其溢出容器：

 #outter { width: 200px; height: 200px; overflow-y: scroll; overflow-x: visible; } #inner { overflow-x: visible; width: 200px; height: 200px; } img { width: 400px; height: 400px; position: absolute; top: 0; left: 0; } 

 <div id="outter"> <div id="inner"> <img src="http://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com"> </div> </div>