您的位置：首页 > Web前端 > CSS

周记6——css实现类似朋友圈九宫格缩略图完美展示

2018-11-03 12:36 786 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航