Html 如何停止显示在 div 之外的图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11726238/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I stop an image displaying outside of the div
提问by thomas-peter
Consider this code...
考虑这个代码...
<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?
我需要添加什么样式才能使其仅显示图像的左上角？
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，不管你信不信，但兔子不是我的应用程序的一部分。哦，在“现实生活”中，我不会使用内联 css。
采纳答案by Colin Brock
div#outer { overflow:hidden; }?
demo here: http://jsfiddle.net/J34aJ/
演示在这里：http: //jsfiddle.net/J34aJ/
回答by xthexder
It's as simple as this:
就这么简单：
overflow: hidden;
回答by Hymanwanders
You can lose the #innerdiv and add overflow: hidden;to the #outerdiv.
您可以丢失#innerdiv 并添加overflow: hidden;到#outerdiv。
#outer {
overflow: hidden;
}
回答by Raab
re-write your outer div style to apply overflow:hidden
重新编写要应用的外部 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>
回答by saluce
Add overflow: hiddento your #outerrule: http://jsfiddle.net/saluce/qJWte/
添加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>?
回答by Sann Min Win
You can just apply img { max-width: 100%; height: auto; }to image tag
你可以只申请img { max-width: 100%; height: auto; }图片标签
