前端图片展示优化！ 无可奈何昨天朋友问我一个关于图片展示失真的问题， 朋友是做IOS开发的对css样式略懂些，看他一脸无奈的样子，我觉得很有必要写点笔记记录了下，供大家参考交流。 灵机一动顺便在百度指数查了一番，感觉图片话题还是大有作为的，日均的搜索量都达到5w，想想自己平时用的各种图，也是很折腾，不知道大家有没有自己的图库，图库申请平台？有些平台上传的图片都会有水印的，如果文章发布多个平台的话，会稍微的有一些影响。。。 图库的上传和使用image.png转入正题不知道大家有没有找图片找不到满意时的烦恼？但是过后却发现有些图片去使用会刚刚好。我找图片主要有三个网站平台，针对不同的应用场景。 Lorem Picsum 在线随机高清图片使用也是特别的简单 #随机图片200宽300高 https://picsum.photos/200/300 #指定ID的图片id为237 https://picsum.photos/id/237/200/300 #grayscale获取灰度获取灰度图像 https://picsum.photos/200/300?grayscale #blur获取模糊的图像 https://picsum.photos/200/300/?blur=2 最后忍不住安利一下Pinbox 在线网站收藏插件，用起来特比的方便 pixabay 高清图库免费正版高清图片素材库，Pixabay拥有超过2.4百万张优质图片和视频素材，让你轻松应对各种设计场景。 image.pngiconfont 阿里图标库iconfont国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。 image.png项目跑起来你猜对了，项目代码还是上传在码云上，直接复现场景，代码敲起来，在稍微普及下图片小知识，一般根据需求选择项目更合适的图片格式，jpg适合色彩较多的场景，gif用于较复杂的动画，png适用于半透明场景,webp是轻量级）。 # 获取图片资源数据 图片尺寸不一致 initFetchImgSource() { fetch('http://picsum.photos/v2/list?limit=9') .then(res = res.json()) .then(list = { console.log('我是图片资源数据 ****',list) this.imgList = list }) } 当显示区域固定长宽时，图片失真前效果是这样的 处理后的效果 关键属性object-fit,Can I use浏览器兼容情况 image.png# 容器的设置 使用grid布局 .container{ display: inline-grid; grid-template-columns: 200px 200px 200px ; grid-template-rows: 200px 200px 200px; border: 1px solid #58546b; } # 子容器样式设置 .item { font-size: 4em; text-align: center; border: 1px solid #58546b; img { width: 100%; height: 100%; # 保持图片原始的宽高比，防止失真 object-fit: contain; opacity: 0.85; transition: all 3s; &:hover{ object-fit: cover; opacity: 1; } } } 当图片特别大的时候，容易加载慢，可以加loading动画 html模板 div v-for="(item, inx) in imgList" :key="item.id" :class="[`item img-item-` + (inx + 1), item.loading ? 'loaded' : 'loading']" img :src="item.download_url" alt="图片" @load="imgLoaded($event,item)" /div 动画样式 # 定义动画 @keyframes loading { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .item { text-align: center; border: 1px solid #58546b; position: relative; transition: .3s color, .3s border; &.loading::before { color: #403b3b; content: " "; height: 70px; width: 70px; font-size: 12px; position: absolute; top: calc(50% - 35px); left: calc(50% - 45px); border: 10px dotted currentcolor; border-radius: 50%; animation: 2s loading linear infinite; } } Animation11.gif当图片路径由于某种原因突然失效时，可以加默认图片来提高体验效果 img:src="item.loadError?'https://storyset.com/images/404/8.svg':(item.download_url+(inx5?'1':''))"alt="图片"@load="imgLoaded($event,item)"@error="imgLoadError($event,item)" Animation22.gif思考拓展图片失真个人觉得根本原因是，图片尺寸的大小是固定的，只有等比放大或者缩小的时候，才能保持图片的清晰度，比如图片原始尺寸：300*400，但是容器是500*500，这样情况下是不可能完整的铺满容器的，要保证用户体验的前提下，可以协调UI设计师对图片重新设计或者改变容器的宽高来适配。当然肯定有更好的解决方法，有经验的小伙伴，可以帮忙指正完善下。 阅读原文