当前位置:首页 > 文章 > 帝国CMS > 正文内容

css完美解决图片变形问题

3年前 (2022-10-22)帝国CMS9478

开发 h5 的时候测试给提了一个 bug 图片变形,开发的时候还真没注意,确实变形了开起来怪怪的,然后就顺利找到了解决办法,废话不多说先呈上解决方法:

<div class="imgWrap">
    <img src="@/assets/images/copter.jpg" alt="">
</div>
 .imgWrap {
    width: 300px;
    height: 300px;
    border: 2px solid skyblue;
  }

  img {
    widows: 100%;
    height: 100%;
    object-fit: cover;
  }

搞定就这么简单!

注意一点: 图片一定要设置宽高,否则设置object-fit无效!
解释:object-position相当于background-position,它的默认值是50% 50%,也就是居中,所以一般不写,加了object-fit,默认就居中了。而object-fit,相当于background-size,即图片填充方式(这里不是图片大小)

css完美解决图片变形问题

扫描二维码推送至手机访问。

版权声明:本文由蓝博发布,如需转载请注明出处。

本文链接:https://www.blueboss.cn/p/746.shtml

“css完美解决图片变形问题” 的相关文章

帝国cms内容页显示标题加粗颜色等属性

帝国cms内容页显示标题加粗颜色等属性

每条信息的标题设置了不同的颜色,这些在列表页自动能显示出来了。 但是,在内容页用[!--title--]只能显示出标题文字,用什么代码能让内容页也能显示出设置好的标题的颜色? 在内容页模板找到[!--title--]替换为 <?=DoTitleFont($navinfor[titlefont...

帝国CMS动态页支持栏目导航标签循环子栏目数据标签万能标签的调用

帝国CMS动态页支持栏目导航标签循环子栏目数据标签万能标签的调用

分享一种利用JS来实现支持栏目导航标签,万能标签,循环子栏目数据标签的方法。   第一步:在【模板】下面增加标签模板,标签模板内容如下:   页面模板内容(*): [!--empirenews.listtemp--]<!--list.var1-->[!--empirenews.list...

帝国cms灵动标签实现循环子栏目数据

帝国cms灵动标签实现循环子栏目数据

帝国cms灵动标签实现循环子栏目数据 <?php $bclassid=$GLOBALS[navclassid];//取得本栏目id //取得本栏目下的子栏目 ?> [e:loop={"select classid, classname, classpath from `[!db.pre...

帝国CMS退出会员登录后怎么跳转到指定网址

帝国CMS退出会员登录后怎么跳转到指定网址

帝国CMS会员退出后跳转到指定地址的方法! 教程方法如下: 打开 /e/member/class/member_loginfun.php 查找: $gotourl="../../"; 修改成: $gotourl="/e/member/cp/"; 这是跳转到会员中心首页,根据实际需要,可修改。 是...

帝国CMS默认的信息提示页修改样式

帝国CMS默认的信息提示页修改样式

帝国CMS默认的信息提示界面有点丑,想要修改怎么办?很简单,下面帝国cms模板网就来为大家分享: 修改文件: e/message/index.php 提示文字要改语言包 e/data/language/gb/pub/q_message.php OK!搞定!大家赶紧去试试吧!...

帝国CMS灵动标签调用指定时间段的信息

帝国CMS灵动标签调用指定时间段的信息

帝国CMS灵动标签怎么调用指定时间段的信息呢? 1、某天发布的文章: [e:loop={'news',10,18,0,'newstime>='.to_time('2010-11-11 00:00:01').' and newstime<='.to_time('2010-11-11 23...