css隐藏超出边框部分的图片

最新推荐文章于 2025-05-13 17:37:39 发布

是杰瑞、

最新推荐文章于 2025-05-13 17:37:39 发布

阅读量7.2k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/jRlittle_notes/article/details/99112977

本文详细介绍了CSS中overflow:hidden属性的应用，通过一个具体的例子展示了如何使用此属性来隐藏超出容器高和宽的内容，特别适用于图片展示场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

#1overflow:hidden;隐藏超出高和宽的图片

<html>
<style>
	.box{
			width:280px;
			height:430px;
			background:#fff;
			border-radius:8px;
			box-shadow:0px 10px 20px #ccc;
			overflow:hidden;//超出定义的高和宽后，隐藏超出的部分
			margin:50px auto;
			}
	img{width: 280px;}
</style>
<body>
		<div class="box">
				<img src="西湖.jpg"/>
		</div>
</body>
</html>

成品图