css图片缩放属性object-fit说明

object-fit 属性可以设置以下值:

属性值 说明 例子
fill 填充容器,可能会改变图片的比例。 object-fit: fill;
contain 保持图片的原始比例,确保图片完全包含在容器内。 object-fit: contain;
cover 保持图片的原始比例,确保图片覆盖整个容器,可能会被裁剪。 object-fit: cover;
none 不对图片进行任何缩放或调整,保持图片的原始尺寸。 object-fit: none;
scale-down 根据图片的大小和容器的大小进行缩放,选择 fill 或 contain 中的较小值。 object-fit: scale-down;

这些值可以通过设置 object-fit 属性来控制图片在容器中的显示方式,以实现不同的布局效果。你可以根据具体需求选择适合的值来使图片在容器中得到合适的展示。

相关推荐
peachSoda71 小时前
封装一个不同跳转方式的通用方法(跳转外部链接,跳转其他小程序,跳转半屏小程序)
前端·javascript·微信小程序·小程序
@PHARAOH1 小时前
HOW - 浏览器兼容(含 Safari)
前端·safari
undefined在掘金390411 小时前
flutter 仿商场_首页
前端
少卿1 小时前
react-native图标替换
前端·react native
熊猫钓鱼>_>1 小时前
TypeScript前端架构与开发技巧深度解析:从工程化到性能优化的完整实践
前端·javascript·typescript
JYeontu2 小时前
肉眼难以分辨 UI 是否对齐,写个插件来辅助
前端·javascript
fox_2 小时前
别再踩坑!JavaScript的this关键字,一次性讲透其“变脸”真相
前端·javascript
盛夏绽放2 小时前
uni-app Vue 项目的规范目录结构全解
前端·vue.js·uni-app
少卿2 小时前
React Native Vector Icons 安装指南
前端·react native
国家不保护废物2 小时前
Vue组件通信全攻略:从父子传到事件总线,玩转组件数据流!
前端·vue.js