28

考虑这段代码...

<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>

我需要添加什么样式才能使它只有图像的左上角可见？

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

4

6 回答 6

26 
div#outer { overflow:hidden; }​

在这里演示：http: //jsfiddle.net/J34aJ/

于 2012-07-30T17:11:20.253 回答
11

您可以只应用img { max-width: 100%; height: auto; }到图像标签

于 2019-12-16T16:00:49.847 回答
3

您可以丢失#innerdiv 并添加overflow: hidden;到#outerdiv。

#outer {
  overflow: hidden;
}
于 2012-07-30T17:12:21.813 回答
2

就这么简单：

overflow: hidden;
于 2012-07-30T17:09:27.893 回答
1

重写你的外部 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>
于 2012-07-30T17:11:54.127 回答
0

添加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>​
于 2012-07-30T17:12:00.697 回答