公司有在做一个类似qq空间的开发，发表说说避免不了的要有图片展示。
产品提出的空间缩略图的展示类似*信朋友圈那种效果——图片不变形、能看到中间部分。
这里给出3种解决方案(jsbin地址失效时可复制代码到jsbin.com看效果）：

1、 img + position + translate

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>JS Bin</title><style>.img_thum,.img_thum2,.img_thum3{position:relative;width:500px;height:500px;overflow:hidden;border:1px solid red;}.img_thum img,.img_thum2 img,.img_thum3 img{position:absolute;top:50%;left:50%;transform: translate(-50%,-50%);min-width: 100%;  /* 针对小图标 */min-height: 100%;  /* 针对小图标 */max-width: 200%; /* 针对太宽的图 -可能变形 */max-height: 200%; /* 针对太高的图 -可能变形 */}</style>
</head>
<body>
<div class="img_thum"><img src="http://img.88tph.com/subject/20181010/1258053ed87b46ef9341d3b72a2da682.jpg!/fw/300" alt=""> /* 300*235 */
</div>
<div class="img_thum2" style="margin-top:20px;"><img src="http://img.88tph.com/homepage/20181029/4a856635a175482f9cc068d2c1e8b585.jpg!fw1200" alt=""> /* 1200*320 */
</div>
<div class="img_thum3" style="margin-top:20px;"><img src="http://img.taopic.com/uploads/allimg/140724/235063-140H410412090.jpg" alt="">  /* 1000*1000 */
</div>
</body>
</html>

jsbin地址：https://jsbin.com/dakenupoqu/edit?html,output

可以看出，img和img_out大小差不多时显示符合要求，但img像素过大时，看到的缩略图就有点“管中窥豹”了...所以这种方案慎用！

2、background-imae + background-size + background-center

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>background-imae+background-size+background-center</title><style>.img_thum,.img_thum2,.img_thum3{position:relative;width:500px;height:500px;overflow:hidden;border:1px solid red;background-size: cover;background-position: center;}.img_thum{background-image: url('http://img.88tph.com/subject/20181010/1258053ed87b46ef9341d3b72a2da682.jpg!/fw/300');}.img_thum2{background-image: url('http://img.88tph.com/homepage/20181029/4a856635a175482f9cc068d2c1e8b585.jpg!fw1200');}.img_thum3{background-image: url('http://img.taopic.com/uploads/allimg/140724/235063-140H410412090.jpg');}</style>
</head>
<body>
<div class="img_thum">/* 300*235 */
</div>
<div class="img_thum2" style="margin-top:20px;">/* 1200*320 */
</div>
<div class="img_thum3" style="margin-top:20px;">/* 1000*1000 */
</div>
</body>
</html>

jsbin地址：https://jsbin.com/xamowokaki/edit?html,output
对比第一种方案，img和img_out只要比例差不多时显示就符合要求，不要求图片大小和显示区域大小差不多。但img像素过大，同时比例差太多时，看到的缩略图也会出现“管中窥豹”的现象。

这种方案算是最完美的实现了，但如果你有语义化强迫症，觉得缩略图属于内容，一定要用img标签，那就推荐第三种实现方式：

3、object-fit

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>JS Bin</title><style>.img_thum,.img_thum2,.img_thum3{position:relative;width:500px;height:500px;overflow:hidden;border:1px solid red;}.img_thum img,.img_thum2 img,.img_thum3 img{width:100%; /* 必须  */height:100%; /* 必须  */object-fit: cover;}</style>
</head>
<body>
<div class="img_thum"><img src="http://img.88tph.com/subject/20181010/1258053ed87b46ef9341d3b72a2da682.jpg!/fw/300" alt="">  /* 300*235 */
</div>
<div class="img_thum2" style="margin-top:20px;"><img src="http://img.88tph.com/homepage/20181029/4a856635a175482f9cc068d2c1e8b585.jpg!fw1200" alt="">   /* 1200*320 */
</div>
<div class="img_thum3" style="margin-top:20px;"><img src="http://img.taopic.com/uploads/allimg/140724/235063-140H410412090.jpg" alt="">  /* 1000*1000 */
</div>
</body>
</html>

jsbin地址：https://jsbin.com/vulumexabo/edit?html,output

这种方案兼容性不是很好，效果类似第二种方案。

不知道object-fit是啥？链接送上：https://www.zhangxinxu.com/wordpress/2015/03/css3-object-position-object-fit/

兼容参考：https://blog.csdn.net/bigbear00007/article/details/80103109

最后补充一点，当图片的比例和规范相差很大时，是没有办法实现这2点需求的。所以，在作图时要注意了！

转载于:https://www.cnblogs.com/chenwenhao/p/9900372.html

css实现类似朋友圈九宫格缩略图完美展示相关推荐

  1. 分享到朋友圈没有缩略图？微信自定义标题描述及缩略图最简单完美的办法！...

    先看看分享到朋友圈没有缩略图的原因 微信为规范自定义分享链接功能在网页上的使用,自2017年4月25日起,JSSDK"分享到朋友圈"及"发送给朋友"接口,自定义 ...

  2. 分享到朋友圈没有缩略图？微信自定义标题描述及缩略图最简单完美的办法！

    首先看看分享到朋友圈没有缩略图的原因 微信为规范自定义分享链接功能在网页上的使用,自2017年4月25日起,JSSDK"分享到朋友圈"及"发送给朋友"接口,自定 ...

  3. 世界那么大，我想去看看。Django仿制微信朋友圈九宫格相册(1)

    前面文章里的Python和Django知识点很重要,但过于零散.我们学习最终的目的还是应用.我们今天就来看下如何利用Django仿制微信朋友圈的九宫格相册.本教程比较长,会分成2部分发布,欢迎持续关注 ...

  4. 项目实战：动态系统的设计（类似朋友圈）

    功能需求 发布动态:类似朋友圈的功能,支持图片.文字.视频. 读取动态:支持推荐.最新.最热等栏目. 删除动态:支持发布者删除,运营删除(包括硬删除和软删除). 审核动态:需要有正常.审核中.封禁中等 ...

  5. Android自定义ViewGroup实现朋友圈九宫格控件

    在我们的实际应用中,经常需要用到自定义控件,比如自定义圆形头像,自定义计步器等等,这篇文章主要给大家介绍了关于Android自定义ViewGroup实现朋友圈九宫格控件的相关资料,需要的朋友可以参考下 ...

  6. h5页面分享朋友，朋友圈设置缩略图，自定义标题，描述！

    #h5页面分享朋友,朋友圈设置缩略图,自定义标题,描述! //要实现显示图片与标题必须调用微信接口, //注意点:1.必须要把跳转的页面绑定到微信的接口域名里://2.后台要进行设置签名算法,获取签名 ...

  7. java设计九宫格拼图软件哪个好用_抖音超火的朋友圈九宫格用什么软件做的? 抖音九宫格图片制作教程...

    抖音这种朋友圈九宫格用什么软件做的?最近,在抖音刷到好多这种九宫格的朋友圈截图,请问是怎么做的?突然火起来的抖音朋友圈九宫格,脚本之家小编也发现这样发朋友圈真的很好看也很有意思,特别是出去玩或者旅游拍 ...

  8. Android 实现仿微信朋友圈九宫格图片+NineGridView+ImageWatcher(图片查看:1.预览，2.拖动，3.放大，4.左右滑动，5.长按保存到手机)的功能

    一.测试 实现: 二.添加依赖包: implementation 'androidx.appcompat:appcompat:1.1.0'implementation 'androidx.recycl ...

  9. python123九宫格输入_python制作朋友圈九宫格图片

    本文实例为大家分享了python朋友圈九宫格图片的具体制作代码,供大家参考,具体内容如下 将一张图片,切分成九宫格的样式: 原图: # -*- coding: UTF-8 -*- from PIL i ...

最新文章

  1. 怎么修改nginx的access.log的时间格式
  2. 为什么很多招聘信息都要求三年以上的工作经验？
  3. 阿里云发布首款全球智能互联的网络产品——云骨干网
  4. flexible.js淘宝移动端rem自适应用法
  5. Java实现将二进制文件显示为图片（SU中的ximage）
  6. skyline TerraBuilder(TB)处理不规则范围影像，去除空值，填充高程等（转载）
  7. 业务初期野蛮生长阶段,微服务化比较麻烦
  8. php之include的使用
  9. 使用GDAL库中的RPC校正问题
  10. HDU 4511 小明系列故事——女友的考验 （AC自动机 + DP）题解
  11. 推荐：百亿级微信红包的高并发资金交易系统设计方案
  12. 【转】MapGIS K9基础系列（二）
  13. 刘宇凡：海子，一个孤独的灵魂诗人
  14. 计算机组成原理速成课程【速成】
  15. 网站搭建：从零搭建个人网站教程（10）
  16. ARM9和STM32什么关系？
  17. Power BI Dax 之时间智能函数
  18. ping www.baidu.com虚拟机中ping百度
  19. HTMLday2旅途
  20. u盘硬盘数据损坏丢失如何恢复?高恢复率高的数据恢复软件

热门文章

  1. Multi-objective training of Generative Adversarial Networks with multiple discriminators-论文翻译
  2. GLAD：多程放大器
  3. 从一棵“微博树”透视物联网的未来
  4. jq 的 append 方法
  5. 我用计算机最难忘的事,我最难忘的事
  6. UML_业务模型中的活动图
  7. access-group和access-class的区别几用法
  8. 亿 图 思维导图软件 E draw Mind Master Pro 8.0.102
  9. 16秋南开计算机应用答案,南开16秋学期《计算机应用基础》在线作业.docx
  10. 【Elasticsearch】Elasticsearch命令行操作