Question

考虑这段代码......

<div id="outer" style="position:absolute;width:100px;height:100px;border:1px solid black">
  <div id="inner">
    <img src="http://rabbitempire.org/wp-content/uploads/Pet-Rabbit-Facts.jpg">
  </div>
</div>

我需要添加哪些样式才能显示图像的左上角？

请注意，我不想使用背景图片，因为问题实际上是关于divs，信不信由你，但兔子不属于我的应用程序。哦，在“现实生活中”，我不会使用内联css。

Answer 1

div#outer { overflow:hidden; }

演示：http://jsfiddle.net/J34aJ/

Answer 2

您可能会丢失#inner div并将overflow: hidden;添加到#outer div。

#outer {
  overflow: hidden;
}

Answer 3

这很简单：

overflow: hidden;

Answer 4

重新编写外部div样式以应用overflow:hidden

<div id="outer" style="position:absolute;width:100px;height:100px;border:1px solid black; overflow:hidden;">
      <div id="inner">
        <img src="http://rabbitempire.org/wp-content/uploads/Pet-Rabbit-Facts.jpg">
      </div>
    </div>

Answer 5

将overflow: hidden添加到您的#outer规则：http://jsfiddle.net/saluce/qJWte/

<div id="outer" style="position:absolute;width:100px;height:100px;border:1px solid black; overflow: none">
  <div id="inner">
    <img src="http://rabbitempire.org/wp-content/uploads/Pet-Rabbit-Facts.jpg">
  </div>
</div>

Answer 6

您可以仅将img { max-width: 100%; height: auto; }应用于图片标签

如何停止在div之外显示的图像

6 个答案: