css實現相似朋友圈九宮格縮略圖完美展現

時間 2019-12-09

標籤 css 實現相似朋友九宮縮略完美展現欄目 CSS 简体版

原文原文鏈接

公司有在作一個相似qq空間的開發，發表說說避免不了的要有圖片展現。
產品提出的空間縮略圖的展現相似*信朋友圈那種效果——圖片不變形、能看到中間部分。
這裏給出3種解決方案(jsbin地址失效時可複製代碼到jsbin.com看效果）：css

一、 img + position + translatehtml

<!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,outputcss3

能夠看出，img和img_out大小差很少時顯示符合要求，但img像素過大時，看到的縮略圖就有點「管中窺豹」了...因此這種方案慎用！wordpress

二、background-imae + background-size + background-centerurl

<!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像素過大，同時比例差太多時，看到的縮略圖也會出現「管中窺豹」的現象。.net

這種方案算是最完美的實現了，但若是你有語義化強迫症，以爲縮略圖屬於內容，必定要用img標籤，那就推薦第三種實現方式：code

三、object-fitorm

<!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,outputhtm

這種方案兼容性不是很好，效果相似第二種方案。blog

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

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

最後補充一點，當圖片的比例和規範相差很大時，是沒有辦法實現這2點需求的。因此，在做圖時要注意了！