css案例7

2024-07-05 15:49| 来源: 网络整理| 查看: 265

一、案例说明

一个100*100固定盒子里面放有图片，不管插入的图片大小如何，让他不变形的占满盒子。 1.最开始写法：在这里插入图片描述这样的话图片会变形。只需要加一句话即可object-fit: cover;。保持其宽高比的同时填充元素的整个内容框.。图片会有所裁剪。

二、案例代码 DOCTYPE html> 首页 div{ width: 100px; height: 100px; border: 1px solid red; } div img{ width: 100%; height: 100%; object-fit: cover; } 三、总结

其他写法详见： https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit

【本文地址】

今日新闻