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

您可以将图像位置设置为绝对，这将允许它溢出其容器：

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

结合overflow-y：auto和overflow-x：visible

2 个答案: