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

css完美解决图片变形问题

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

开发 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://blueboss.cn/p/746.shtml

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

window服务器iis的帝国cms站点上传大文件出现500问题

window服务器iis的帝国cms站点上传大文件出现500问题

帝国制作的网站,windows系统服务器iis环境,上传大文件出现500错误怎么办?windows系统服务器中,上传大文件提示500怎么办? linux下改到iis+php后,上传大于2M就出500错,改了php.ini中的upload_max_filesize也不行,最后解决如下: 第一步:修改p...

帝国CMS模板里面灵动标签怎么调用日期时间

帝国CMS模板里面灵动标签怎么调用日期时间

帝国cms模板里面灵动标签怎么调用日期时间? 用以下代码即可: <?=date("Y-m-d H:i:s",$bqr[newstime])?> OK!大家可以去测试看看!...

帝国cms模板内容页灵动标签调用当前栏目文章排除当前文章

帝国cms模板内容页灵动标签调用当前栏目文章排除当前文章

解决方法:调用当前栏目信息,栏目ID用:'selfinfo',排除当前信息标签附加sql条件参数用:"id<>'$navinfor[id]'" 举例: [e:loop={'selfinfo',10,0,0,"id<>'$navinfor[id]'"}] <a href...

帝国cms信息反馈开启验证码

帝国cms信息反馈开启验证码

1、后台-系统设置-系统参数设置-信息设置-反馈验证码(后面点开启) 2、信息反馈本身并无放置验证码代码,所先复制评论的验证码代码,后台-模板-评论列表模板-管理评论模板-修改-复制其中的验证码代码 代码如下: 验证码:<input name="key" type="text" size=...

帝国CMS灵动标签从第二条信息开始

帝国CMS灵动标签从第二条信息开始

正常调用文章信息,是从第一条信息开始调用的,或者是逐条调用,那么,假如我们需要从第二条信息开始调用  [e:loop={栏目ID/专题ID,显示条数,操作类型,只显示有标题图片,附加SQL条件,显示排序}] [e:loop={栏目ID/专题ID,'1,2',操作类型,只显示有标题图片,附加SQL条件...

帝国CMS内容页调用指定ID的文章可以指定多篇

帝国CMS内容页调用指定ID的文章可以指定多篇

帝国CMS内容页中调用多篇指定id文章的方法,下面一起来学习学习吧: 大概的思路是: 新建1个产品文章字段,这样的话,每个产品里面都可以填写不同的产品id,然后在模板里面调用出来即可。 下面附上内容页模板里面调用多篇指定文章id的php代码: <?php $sql='id in ('.$na...