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

css完美解决图片变形问题

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

开发 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完美解决图片变形问题” 的相关文章

IIS环境下开启TAG伪静态帝国CMS的中文TAG提示此TAG不存在

IIS环境下开启TAG伪静态帝国CMS的中文TAG提示此TAG不存在

用帝国cms制作网站或者搬家后,IIS环境下开启TAG伪静态,帝国CMS的中文TAG提示此TAG不存在,是什么问题呢?解决方案: 打开/e/tags/index.php文件 查找: $tagname=RepPostVar($_GET['tagname']); 修改为 $tagname=RepPo...

帝国cms远程图片本地化不生效原因以及解决方法

帝国cms远程图片本地化不生效原因以及解决方法

帝国cms远程图片本地化不生效原因1、图片格式和大小设置问题帝国默认的图片格式不包括png,但是我们现在qq截图等都是png图片格式,加进去即可,假如源站的图片格式帝国后台没有,那肯定保存不了了。系统参数设置——文件设置——文件扩展名同时设置可以上传图片大小。2、服务器配置问题需要在php.in中把...

帝国CMS灵动标签调用当前栏目下子栏目列表

帝国CMS灵动标签调用当前栏目下子栏目列表

灵动标签调用当前栏目下子栏目,支持栏目自定义排序。下面帝国cms模板网就来告诉大家: [e:loop={"select classname,classpath,classid from phome_enewsclass where bclassid='$GLOBALS[navclassid]' a...

帝国cms灵动标签调用字母所属的信息

帝国cms灵动标签调用字母所属的信息

帝国cms灵动标签调用字母所属的信息 [e:loop={"select * from [!db.pre!]ecms_news where infozm='A'",5,24,0}] <a href="<?=$bqsr['titleurl']?>" target="_blank"&g...

帝国CMS模板中不同会员组显示不同内容

帝国CMS模板中不同会员组显示不同内容

帝国cms模板里面不同会员组显示不同内容怎么实现? 具体调用代码如下: <?php  if(getcvar('mlgroupid')<1)  {  ?>  //游客看到的内容  <?php  }  elseif(getcvar('mlgroupid')==1)  {  ?&...

帝国CMS用灵动标签调用简介截取字数

帝国CMS用灵动标签调用简介截取字数

帝国CMS灵动标签调用文章缩略图的标签写法: <?=$bqr[smalltext]?> <?=esub($bqr[smalltext],50)?> (上面标签注释:该标签可限制内容简介显示的字数,举例中的50表示显示50个字符,算城成是汉字就是25个字,大家可以根据自己的...