CSS3 微信小程序和web端适用让图片居中不变形

前言

    图片的宽高比和外层容器的宽高比不同是，设置充满的时候回发生形变。
    参考链接：https://www.cnblogs.com/web1/p/9327635.html

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

微信小程序-aspectFill

<image src='' mode="aspectFill"></image>

最后

以上就是悦耳小刺猬为你收集整理的CSS3 微信小程序和web端适用让图片居中不变形的全部内容，希望文章能够帮你解决CSS3 微信小程序和web端适用让图片居中不变形所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。