css案例——图片自适应盒子大小（不变形）

OXOXTECH

发布于 2023-07-20 14:11:40

1.8K0

文章被收录于专栏：技术客栈技术客栈

一、案例说明

一个100*100固定盒子里面放有图片，不管插入的图片大小如何，让他不变形的占满盒子。 1.最开始写法：

这样的话图片会变形。只需要加一句话即可object-fit: cover;。保持其宽高比的同时填充元素的整个内容框.。图片会有所裁剪。

二、案例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>首页</title>
		<style>
			div{
				width: 100px;
				height: 100px;
				border: 1px solid red;
			}
			div img{
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		</style>
	</head>
	<body>
		<div>
			<img src="./img/bx1.jpeg" />
		</div>
	</body>
</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

css