一、案例说明
一个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——图片自适应盒子大小(不变形)》对你有帮助,请点赞、收藏,并留下你的观点哦!