周記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實現類似朋友圈九宮格縮略圖完美展示