公司有在做一个类似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点需求的。所以，在作图时要注意了！

周记6——css实现类似朋友圈九宫格缩略图完美展示的更多相关文章

  1. Masonry 布局 cell 高度适应的一种方案(实现类似朋友圈简单布局)

    来源:伯乐在线 - 夏天然后 链接:http://ios.jobbole.com/89298/ 点击 → 申请加入伯乐在线专栏作者 前言: 我模仿的是微博的布局所以也就没有 评论动态刷新cell. 1 ...

  2. ios开发-日期处理（类似朋友圈，微博等的发送时间）

    ios开发中,我们经常要处理从服务器获取的时间.类似朋友圈,微博这些应用.我们经常可以看到“刚刚”,“31分钟前发表”,“昨天5点”,之类的字样. 当时我们从服务器端获取的都是那条朋友圈信息,或者微博 ...

  3. 如何使用捷映App制作朋友圈九宫格视频图片合集

    在刷朋友圈的过程中,看到九宫格的视频图片合集,带有酷炫的音效和动效,展现效果非常好,那么我们该如何制作呢?下面我为大家介绍. 第一步,我们需要在各大应用市场搜索[捷映视频制作]App,点击[安装]. ...

  4. iOS 类似朋友圈的图片浏览器SDPhotoBrowser

    SDPhotoBrowser.Demo 1.在文件SDBrowserImageView.m中有用SDWebImage到网络加载图片 需要的注释去掉即可 #import "ViewContro ...

  5. 纯html实现将网页页面分享到微信朋友圈添加缩略图图片的方法

    在分享页面中的body中最前面添加一个隐藏的div,里面放一个300*300的正方形图片即可:如下 <div style="display:none"><img ...

  6. Python 带你一键生成朋友圈超火的九宫格短视频

    1. 场景 如果你经常刷抖音和微信朋友圈,一定发现了最近九宫格短视频很火! ​从朋友圈九宫格图片,到九宫格视频,相比传统的图片视频,前者似乎更有个性和逼格 除了传统的剪辑软件可以实现,是否有其他更加快 ...

  7. css实现朋友圈照片排列布局

    纯css实现朋友圈不同数量图片不同布局 首先可以打开朋友圈观察不同图片数量的几种布局,也可参考下图示例: 可以发现 除1张图片,4张图片特殊外,其他数量图片均使用一行三列的方式排列: 假设有如下HTM ...

  8. Android NineGridLayout — 仿微信朋友圈和QQ空间的九宫格图片展示自定义控件

    NineGridLayout 一个仿微信朋友圈和QQ空间的九宫格图片展示自定义控件. GitHub:https://github.com/HMY314/NineGridLayout 一.介绍 1.当只 ...

  9. 用Python一键生成炫酷九宫格图片，火了朋友圈

随机推荐

  1. 解决：sql server无法在C盘下创建database/操作系统错误5（拒绝访问）

    问题: ——无法在C盘的任何位置创建数据库文件 ——在非系统盘的F盘可以创建数据库文件 解决方法1:禁用“以管理员批准模式运行所有管理员" 解决方法2:打开C盘对Users用户的完全控制权限 ...

  2. input disabled的情况下在IOS设备中怎么修改颜色

    -webkit-text-fill-color:black; -webkit-opacity:1; opacity: 1; 一句代码就欧了

  3. SQL中DateTime转换成Varchar样式

    SQL中DateTime转换成Varchar样式语句及查询结果:Select CONVERT(varchar(100), GETDATE(), 0): 05 16 2006 10:57AMSelect ...

  4. 结合业务，精炼SQL

    现代网站,性能的瓶颈都围绕着数据库的性能来谈.数据库是存储的核心部件,在日益增长的流量中会凸显数据库的性能瓶颈.从<淘宝技术十年>书中来看,淘宝发展历程中从MYSQL换成了ORACLE又换 ...

  5. c#-MVC基础操作-数据的展示及增删改、登录页面及状态保持

    一.数据展示 1.View代码: <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynam ...

  6. 腾讯云服务器安装宝塔面板快速配置LNMP/LAMP网站系统

    我们在选择购买腾讯云服务器之后,有部分用户肯定是用来建站用途的.毕竟云服务器的性能和功能比虚拟主机优秀很多.腾讯云服务器拥有香港.北京.广州.上海.美国等多个机房,可以安装Linux和Windows系 ...

  7. 使用scp命令，远程上传下载文件/文件夹

    1.从服务器下载文件 scp username@servername:/path/filename /local/path例如: scp ubuntu@117.50.20.56:/ygf/data/d ...

  8. linux 命令 htop & 重定向 top， bashrc文件

    最近在用linux服务器跑程序,有几条linux命令还蛮重要的,总结一下: 1. 直接跑代码: python test.py 2. 若想程序在后台跑,即使本地和服务器断开也能运行: nohup pyt ...

  9. 论文分享NO.3（by_xiaojian）

    论文分享第三期-2019.03.29 Fully convolutional networks for semantic segmentation,CVPR 2015,FCN 一.全连接层与全局平均池 ...

  10. OpenERP button 的三种类型

    1. workflow: 默认是这种类型,如果你需要创建工作流类型的button使用这个 2. object: 调用function的类型,如果你需要调用py文件中同名的方法,使用该类型. 3.act ...