结合溢流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>