一、案例说明
一个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>
三、总结
其他写法详见：
/zh-CN/docs/Web/CSS/object-fit
如果觉得《css案例7——图片自适应盒子大小（不变形）》对你有帮助，请点赞、收藏，并留下你的观点哦！
