Html 避免图像超出 div?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/4328625/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 05:32:28  来源:igfitidea点击:

Avoid an image to go outside a div?

csshtmlcrop

提问by Somebody still uses you MS-DOS

I have:

我有:

<div style="height:15px">
    <img src="image" />
</div>

The image is bigger than 15px, so it's outside the div when you see it. How do I "crop" the image (show only the 15px port of it), only using css?

图像大于 15px,所以当你看到它时它在 div 之外。如何“裁剪”图像(仅显示它的 15px 端口),仅使用 css?

回答by Trufa

You need overflow:hiddensee an example here:

您需要overflow:hidden在此处查看示例:

http://www.jsfiddle.net/S8qAq/

http://www.jsfiddle.net/S8qAq/

Read about overflow: here W3Schools

阅读overflow这里 W3Schools

Good luck!

祝你好运!

回答by Etienne de Martel

Try giving an overflow:hiddento the div.

尝试给overflow:hiddendiv 一个。

回答by wajiw

add overflow:hidden;to your div style.

添加overflow:hidden;到您的 div 样式。

回答by RabidFire

Use the overflow css property:

使用溢出 css 属性:

overflow: hidden;

回答by Breezer

use

overflow:hidden;

回答by Javaish

I am surprised no one has suggested object-fit: cover;

我很惊讶没有人建议 object-fit: cover;