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

css完美解决图片变形问题

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

开发 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模板内容页SQl调用当前TAG标签

帝国cms模板内容页SQl调用当前TAG标签

帝国cms内容页SQl方式调用当前TAG标签的方式 具体调用代码如下: <?php $fr=$empire->fetch1("select infotags from {$dbtbpre}ecms_news_data_{$navinfor[stb]} where id='$navinf...

帝国CMS自动审核发布信息文章的方法

帝国CMS自动审核发布信息文章的方法

当一个文章站大量采集内容,一次性全部发布完这一是不利于SEO的,也是容易作弊,所以从网上找了这个脚本稍作修改。分享给大家,其实也很简单,但比帝国自带的计划任务功能好的是,不用开启后台才运行,脚本放到服务器上后加入服务器的计划任务便可以每天定时审核发布信息。下面帝国cms模板网来告诉大家帝国CMS自动...

帝国cms模板使用的灵动标签常用的变量

帝国cms模板使用的灵动标签常用的变量

[e:loop={栏目ID,显示条数,操作类型,只显示有标题图片,附加SQL条件,显示排序}] <?=$bqno?><a href="<?=$bqsr[titleurl]?>" target="_blank"><?=$bqr[title]?><...

帝国CMS列表内容模板(list.var)调用会员头像会员名称等

帝国CMS列表内容模板(list.var)调用会员头像会员名称等

帝国CMS列表内容模板的list.var里面怎么调用会员头像。会员名称,文章标题和文章链接呢?其实方法也很简单,下面帝国cms模板网就来为大家分享: 标签代码如下: $userr=$empire->fetch1("select userpic  from {$dbtbpre}enewsmem...

帝国CMS列表页判断是否有标题图片没有则显示指定的图片

帝国CMS列表页判断是否有标题图片没有则显示指定的图片

帝国CMS列表页模板里面怎么判断文章是否有标题图片,如果没有图片就调用显示默认或者指定的一张图片!   第一种方法、用php判断:   ①、复制以下代码带到“列表内容模板” if(empty($r[titlepic])) { $pic=''; } else { $pic='<img src=...

帝国CMS模板怎么禁止鼠标右键菜单和复制功能

帝国CMS模板怎么禁止鼠标右键菜单和复制功能

帝国cms模板如何禁止鼠标、鼠标右键和复制功能,这样可以避免一些只知道复制的网站增加原始内容的强度。 正如模板的确认所知,模板中页面的内容从html主体标记中的代码开始。我们只需要另一个代码来实现屏幕上的鼠标右键:oncontextmenu=self.event.returnValue=false...