如何停止在div之外显示图片 [英] How do I stop an image displaying outside of the div

问题描述

考虑此代码...

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

我需要添加哪种样式以使其仅可见图像的左上角?

What style(s) do I need to add to make it so only the top left hand corner of the image is visible?

请注意，我不想使用背景图像，因为问题实际上是关于div的，信不信由你，但Rabbit不属于我的应用程序.哦，在现实生活"中，我不会使用嵌入式CSS.

Please note, I don;t want to use a background image because the question is really about divs, believe it or not but the rabbit isn't part of my application. Oh and in "real life" I wouldn't use inline css.

推荐答案

div#outer { overflow:hidden; }​

此处演示: http://jsfiddle.net/J34aJ/

这篇关于如何停止在div之外显示图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！