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

相关推荐
你挚爱的强哥24 分钟前
【sgCreateCallAPIFunctionParam】自定义小工具:敏捷开发→调用接口方法参数生成工具
前端·javascript·vue.js
米老鼠的摩托车日记32 分钟前
【vue element-ui】关于删除按钮的提示框,可一键复制
前端·javascript·vue.js
猿饵块1 小时前
cmake--get_filename_component
java·前端·c++
大表哥61 小时前
在react中 使用redux
前端·react.js·前端框架
Passion不晚1 小时前
打造民国风格炫酷个人网页:用HTML和CSS3传递民国风韵
javascript·html·css3
十月ooOO2 小时前
【解决】chrome 谷歌浏览器,鼠标点击任何区域都是 Input 输入框的状态,能看到输入的光标
前端·chrome·计算机外设
qq_339191142 小时前
spring boot admin集成,springboot2.x集成监控
java·前端·spring boot
pan_junbiao2 小时前
Vue使用代理方式解决跨域问题
前端·javascript·vue.js
明天…ling2 小时前
Web前端开发
前端·css·网络·前端框架·html·web
ROCKY_8172 小时前
web前端-HTML常用标签-综合案例
前端·html