Loading...

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

一、案例说明

一个100*100固定盒子里面放有图片，不管插入的图片大小如何，让他不变形的占满盒子。


最开始写法：

5d2903984b3af817e1aafe9cabd7517d.png

0b8ff7c5541f1132842f6c6ead86098b.png

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

0684a44339539e350b3ab9aeea3b1598.png

二、案例代码

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


0

回到顶部