object-fit:fill 不生效

object-fit:fill 不生效

img 代码如下:

复制代码
<img :src="./img.png" alt="图片" style="width: 120px;height: 100px;object-fit: fill;"/>

设置宽高和自适应拉伸后,图片宽度还是原始宽度。

解决办法:

img 外面套一层 div

复制代码
<div>
	<img :src="./img.png" alt="图片" style="width: 120px;height: 100px;object-fit: fill;"/>
</div>
相关推荐
kyriewen115 小时前
给浏览器画个圈:CSS contain 如何让页面从“卡成PPT”变“丝滑如德芙”
开发语言·前端·javascript·css·chrome·typescript·ecmascript
bdawn11 小时前
SCSS、CSS 和 SASS 之间的联系与区别
css·sass·预处理·编译·scss
阿珊和她的猫12 小时前
微信小程序 WXSS 与 CSS 的区别
css·微信小程序·notepad++
xingyynt14 小时前
【HTML+CSS】使用HTML与后端技术连接数据库
css·数据库·html
January120715 小时前
Vue3打卡计时器:完整实现与优化方案
前端·javascript·css
小彭努力中15 小时前
195.Vue3 + OpenLayers:监听瓦片地图加载情况(200、403及异常处理)
前端·css·openlayers·cesium·webgis
Mintopia16 小时前
一份合格的软件 VI 文字文档简单版
前端·css·人工智能
酉鬼女又兒1 天前
零基础快速入门前端JavaScript四大核心内置对象:Math、Date、String、Array全解析(可用于备赛蓝桥杯Web应用开发)
前端·javascript·css·蓝桥杯·前端框架·js
氢灵子1 天前
Fixed 定位的失效问题
前端·javascript·css
橘子编程2 天前
CSS 全栈指南:从基础到 2025 新特性
前端·css·chrome·tensorflow·less·css3·html5