销售只是起点、服务永无止境 云创模板

您现在的位置: 云创网 > 建站教程 >

如何使用css来让图片居中不变形 微信小程序和web端适用

来源:原创 发布时间:2022-11-16 11:31:00 热度:1473 ℃标签: 网络活动策划 全网营销 售后无忧

阿里云云产品优惠

图片变形很多人祭奠出了妖魔鬼怪般的各种大法,比如使用jq来写,或者使用css表达式来写。今天我总结的是使用css3来写,唯一最大缺点就是对一些浏览器版本不够兼容。下面就是关于如何使用css来让图片居中不变形


web端:

img{vertical-align:middle;object-fit: cover}
object-fit: cover 的效果和background-size:cover;的效果一样,一个缺点就是容器不够适应的原图大小的比例的话,会按照比例进行放大裁剪

 object-fit CSS 属性指定替换元素的内容应该如何适应到其使用的高度和宽度确定的框
 
  fill
被替换的内容大小可以填充元素的内容框。 整个对象将完全填充此框。 如果对象的高宽比不匹配其框的宽高比,那么该对象将被拉伸以适应。

  contain
被替换的内容将被缩放,以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比,因此如果宽高比与框的宽高比不匹配,该对象将被添加“黑边”。

  cover
被替换的内容大小保持其宽高比,同时填充元素的整个内容框。 如果对象的宽高比与盒子的宽高比不匹配,该对象将被剪裁以适应。

  none
被替换的内容尺寸不会被改变。

  scale-down
内容的尺寸就像是指定了none或contain,取决于哪一个将导致更小的对象尺寸



详细的object-fit方法的介绍可以查看mdn文档:https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit
 
微信小程序端这块比较灵活,除了可以使用以上的方法之外,微信小程序image有自带的属性方法:
<image src='http://122.114.109.181:8888/img/webiste/2018/05/20180524092901026881.png' mode="aspectFill"></image>

重点就是:mode="aspectFill" 这块,详细介绍如下:aspectFillobject-fit: cover一样,都是和background-size:cover效果差不多

    scaleToFill{

        background-size:100% 100%;//不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素    }

    aspectFit{

        background-size:contain;//保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。    }

    aspectFill{

        background-size:cover;//保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。

    }


转载请注明来自http://www.gdaia.com/muban/newsshow/370.html
如有版权纠纷或者违规问题,请联系我们删除,谢谢!

    限时特惠!终身会员 仅需199元!上架最多的PbootCMS模板下载站!建站资源爽快下!
     
    QQ在线咨询