blog
blog copied to clipboard
xianzou
弦奏的博客 一个混迹多年的前端开发人员，正在努力的学习中
css防止图片挤压变形 object-fit: cover 参考链接：https://blog.csdn.net/tianpeng1996/article/details/116163196
> HEIC是一种容器格式，可以存储使用HEVC格式编码的声音和图像 ，相比jpg， 具有较小的文件大小和较高的图像质量 ； `Heic(HEIF)`，虽然有更小的体积， 但是`H5`显示`HEIC`格式的图片目前Chrome等浏览器还不支持自动解析，并且`http`协议中[Content-Type](https://www.runoob.com/http/http-content-type.html)默认还没有`image/heic`这个属性 （微信和钉钉打开该文件会自动转码，或者发送的时候系统底层会自动转码）; 有些图片后缀是`.jpg`格式，但其实是`heic`格式（可以用记事本打开该图片看第一行是否有`heic`文字），这时候图片上传根据后缀名来判断会失效，但是其实在手机中确可以预览，但是H5上传会出现问题；； 目前的解决方案有三： 1、前端判断格式，拒绝上传； 2、前端使用 [heic2any](https://github.com/alexcorvi/heic2any) 转码； 3、后端转码（推荐）； 这里介绍判断`heic`格式代码： ```JS const BASE64_MARKER = ';base64,'; function convertDataURIToBinary(dataURI) { const base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;...
ImgList.scss ```scss .pictures-adaptive { display: flex; flex-wrap: wrap; .pictures { position: relative; overflow: hidden; margin-bottom: 2%; img{ width: 100%; } } .pictures:only-child img{ width: 70%; } /* 3张图片 */ .pictures:nth-child(1):nth-last-child(3),...