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

css完美解决图片变形问题

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

开发 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判断评论验证码是否开启

国CMS模板中怎么判断评论验证码是否开启? 打开:后台-模板-公共模板变量-评论表单 查找如下代码: 验证码: <input name="key" type="text" class="inputText" size="10" /> <img src="[!--news.url-...

帝国CMS用PHP获取任意栏目ID

帝国CMS用PHP获取任意栏目ID

帝国cms模板中,如果栏目层级比较深,而且又要在栏目里面获取上级栏目或者下级栏目的一些数据时,获取到该栏目ID,上级栏目,上上级栏目,直到顶级栏目ID就很关键了  具体方法如下: 一,在模板页面,通过PHP先获取当前栏目的ID: <?php     $a=$GLOBALS[navclassi...

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

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

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

帝国CMS模板前端判断PC/手机访问端跳转手机端代码

帝国CMS模板前端判断PC/手机访问端跳转手机端代码

帝国cms模板前台判断手机接入终端跳转手机网站代码: <script>   function is_pc(){      var os = new Array("Android","iPhone","Windows Phone","iPod","BlackBerry","MeeGo",...

帝国CMS7.5版系统模型新增发布后和修改后处理函数扩展

帝国CMS7.5版系统模型新增发布后和修改后处理函数扩展

系统模型新增前台与后台“增加信息后处理函数”、“修改信息后处理函数”,函数格式:function user_ModFun($mid,$isadd,$isq,$classid,$id,$cs){}参数说明:user_ModFun:函数名$mid:系统模型ID$isadd:值为1时是增加信息;值为0时是...

帝国cms采集怎么添加采集来源地址

帝国cms采集怎么添加采集来源地址

帝国cms采集规则加上采集来源地址的方法!一起来了解一下吧: 实现方法如下: 帝国cms采集规则采集来源地址只需要加在模型里加上一个“empireselfurl”这个字段不用设置正则,入库后他自然就是采集的页面地址。...