资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/如何使用css来让图片居中不变形 微信小程序和web端适用

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

番茄西红柿 / 2330人阅读

摘要：被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比。整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加黑边。如果对象的宽高比与盒子的宽高比不匹配，该对象将被剪裁以适应。

图片变形很多人祭奠出了妖魔鬼怪般的各种大法，比如使用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有自带的属性方法:

http://122.114.109.181:8888/img/webiste/2018/05/20180524092901026881.png mode="aspectFill">

 

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

    scaleToFill{
        background-size:100% 100%;//不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
    }
    aspectFit{
        background-size:contain;//保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
    }
    aspectFill{
        background-size:cover;//保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
    }

 

转载本人博文时请注明出处和原文地址！！！

 

私有云 GPU服务器 如何使用微信小程序 微信小程序如何在电脑上使用 微信小程序怎么使用 怎样使用微信小程序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2005.html

相关文章

  • CSS及布局

    摘要：经过半年的打磨，正式发布，主要是新增了一些常用组件，并使用命名，为接下来的微信小程序开发做好准备。这两种方式实现的瀑布流式布局均支持首屏和网页窗口大小改变时的列数自适应。主要是对于标准里的布局方式草案中的布局方式进行一些总结。 一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看...

    jaysun 评论0 收藏0

  • 记录一下自己的春招，唯品会、360、京东offer已收、腾讯offer_call已达！！！

    摘要：春招结果五月份了，春招已经接近尾声，因为到了周五晚上刚好有空，所以简单地记录一下自己的春招过程。我的春招从二月初一直持续到四月底，截止今天，已经斩获唯品会电商前端研发部大数据与威胁分析事业部京东精锐暑假实习生的腾讯的是早上打过来的。 春招结果 五月份了，春招已经接近尾声，因为到了周五晚上刚好有空，所以简单地记录一下自己的春招过程。我的春招从二月初一直持续到四月底，截止今天，已经斩获唯品...

    freewolf 评论0 收藏1

  • 前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）

    摘要：并总结经典面试题集各种算法和插件前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快速搭建项目。 本文是关注微信小程序的开发和面试问题，由基础到困难循序渐进，适合面试和开发小程序。并总结vue React html css js 经典面试题 集各种算法和插件、前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快...

    li21 评论0 收藏0

  • 前端面试题总结（js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源）

    摘要：并总结经典面试题集各种算法和插件前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快速搭建项目。 本文是关注微信小程序的开发和面试问题，由基础到困难循序渐进，适合面试和开发小程序。并总结vue React html css js 经典面试题 集各种算法和插件、前端视频源码资源于一身的文档，优化项目，在浏览器端的层面上提升速度，帮助初中级前端工程师快...

    AaronYuan 评论0 收藏0

发表评论

登陆后可评论

0条评论

番茄西红柿

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<