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

最新推荐文章于 2024-06-17 10:49:59 发布

耶啵奶膘

最新推荐文章于 2024-06-17 10:49:59 发布

阅读量8k

点赞数 12

分类专栏： CSS 文章标签： css html

本文链接：https://blog.csdn.net/xulihua_75/article/details/125233228

版权

CSS 专栏收录该内容

37 篇文章 2 订阅

订阅专栏

一、案例说明

一个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>