周记6——css实现类似朋友圈九宫格缩略图完美展示
公司有在做一个类似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实现类似朋友圈九宫格缩略图完美展示的更多相关文章
- Masonry 布局 cell 高度适应的一种方案(实现类似朋友圈简单布局)
来源:伯乐在线 - 夏天然后 链接:http://ios.jobbole.com/89298/ 点击 → 申请加入伯乐在线专栏作者 前言: 我模仿的是微博的布局所以也就没有 评论动态刷新cell. 1 ...
- ios开发-日期处理（类似朋友圈，微博等的发送时间）
ios开发中,我们经常要处理从服务器获取的时间.类似朋友圈,微博这些应用.我们经常可以看到“刚刚”,“31分钟前发表”,“昨天5点”,之类的字样. 当时我们从服务器端获取的都是那条朋友圈信息,或者微博 ...
- 如何使用捷映App制作朋友圈九宫格视频图片合集
在刷朋友圈的过程中,看到九宫格的视频图片合集,带有酷炫的音效和动效,展现效果非常好,那么我们该如何制作呢?下面我为大家介绍. 第一步,我们需要在各大应用市场搜索[捷映视频制作]App,点击[安装]. ...
- iOS 类似朋友圈的图片浏览器SDPhotoBrowser
SDPhotoBrowser.Demo 1.在文件SDBrowserImageView.m中有用SDWebImage到网络加载图片 需要的注释去掉即可 #import "ViewContro ...
- 纯html实现将网页页面分享到微信朋友圈添加缩略图图片的方法
在分享页面中的body中最前面添加一个隐藏的div,里面放一个300*300的正方形图片即可:如下 <div style="display:none"><img ...
- Python 带你一键生成朋友圈超火的九宫格短视频
1. 场景 如果你经常刷抖音和微信朋友圈,一定发现了最近九宫格短视频很火! 从朋友圈九宫格图片,到九宫格视频,相比传统的图片视频,前者似乎更有个性和逼格 除了传统的剪辑软件可以实现,是否有其他更加快 ...
- css实现朋友圈照片排列布局
纯css实现朋友圈不同数量图片不同布局 首先可以打开朋友圈观察不同图片数量的几种布局,也可参考下图示例: 可以发现 除1张图片,4张图片特殊外,其他数量图片均使用一行三列的方式排列: 假设有如下HTM ...
- Android NineGridLayout — 仿微信朋友圈和QQ空间的九宫格图片展示自定义控件
NineGridLayout 一个仿微信朋友圈和QQ空间的九宫格图片展示自定义控件. GitHub:https://github.com/HMY314/NineGridLayout 一.介绍 1.当只 ...
- 用Python一键生成炫酷九宫格图片，火了朋友圈
随机推荐
- Visual Studio for mac从入门到放弃1
MAC 第一步:从微软官网下载:https://www.visualstudio.com/vs/visual-studio-mac/ 第二步:安装软件过程出现 It was not possible ...
- 获取outlook联系人寻呼字段
这称不上一篇技术文. 这边记录解决一个问题的过程和感受.这种感觉每个搞IT的人或多或少都感受过,是程序人独有的快乐之一.只是大部分人没有将这种感觉记录下来.但是当你记录时,这种感觉也早已消失. 需求: ...
- 巧用网页开发者工具F12 审查、修改元素、去除广告、屏蔽遮罩
巧用网页开发者工具F12 审查.修改元素.去除广告.屏蔽遮罩 每当打开一个网页的时候,是否为页面有很多广告而烦恼:是否为要操作页面(例如观看超清视频),请先注册登录等等事情而麻烦:是否对网页加锁的视频 ...
- Android 透明状态栏
在 android 4 系统中可以设置透明状态栏. 但在 android 5.0 以上遇到问题.但问题是可以解决的,需要正确的设置 theme. 但是需要注意一点,5以上可以修改 status bar ...
- Ceph 基础知识和基础架构认识
1 Ceph基础介绍 Ceph是一个可靠地.自动重均衡.自动恢复的分布式存储系统,根据场景划分可以将Ceph分为三大块,分别是对象存储.块设备存储和文件系统服务.在虚拟化领域里,比较常用到的是Cep ...
- leetcode 84. 柱状图中最大的矩形 JAVA
题目: 给定 n 个非负整数,用来表示柱状图中各个柱子的高度.每个柱子彼此相邻,且宽度为 1 . 求在该柱状图中,能够勾勒出来的矩形的最大面积. 以上是柱状图的示例,其中每个柱子的宽度为 1,给定的高 ...
- Python3.5 学习四
装饰器 定义:本质是函数,装饰其他函数,即为其他函数添加附加功能的 原则: 1 不能修改被装饰函数的源代码 2 不能改变被装饰函数的调用方式(对于被装饰函数来说完全透明,不会受影响) 实现装饰器功能的 ...
- python 杂谈
python 当前文件导入自定义模块的时候,会默认执行一遍 python使用的变量必须是已经定义或者声明过的.
- itemgetter和groupby
一. itemgetter的使用方法 itemgetter()返回一个指定列表下标或者字典键的函数,通过这个返回的函数作用到对象上,获得才能取得相应的值 1. 排序字典列表的一个例子 from ope ...
- python 之 爬普房网
from bs4 import BeautifulSoupimport reimport requestsimport pandas## pa pufangwangclass down(object) ...