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 属性来控制图片在容器中的显示方式,以实现不同的布局效果。你可以根据具体需求选择适合的值来使图片在容器中得到合适的展示。

相关推荐
喵叔哟18 分钟前
重构代码之取消临时字段
java·前端·重构
还是大剑师兰特1 小时前
D3的竞品有哪些,D3的优势,D3和echarts的对比
前端·javascript·echarts
王解1 小时前
【深度解析】CSS工程化全攻略(1)
前端·css
一只小白菜~1 小时前
web浏览器环境下使用window.open()打开PDF文件不是预览,而是下载文件?
前端·javascript·pdf·windowopen预览pdf
方才coding1 小时前
1小时构建Vue3知识体系之vue的生命周期函数
前端·javascript·vue.js
阿征学IT1 小时前
vue过滤器初步使用
前端·javascript·vue.js
王哲晓1 小时前
第四十五章 Vue之Vuex模块化创建(module)
前端·javascript·vue.js
丶21361 小时前
【WEB】深入理解 CORS(跨域资源共享):原理、配置与常见问题
前端·架构·web
发现你走远了1 小时前
『VUE』25. 组件事件与v-model(详细图文注释)
前端·javascript·vue.js
Mr.咕咕1 小时前
Django 搭建数据管理web——商品管理
前端·python·django