圖片圓角並居中顯示解決方案
阿新 • • 發佈：2019-01-09
1、圖片圓角顯示
例如（非常簡單）：
HTML：
<img src="mao.png" />
CSS：
img{ border-radius: 10px; }
如果圖片只為圓角，這種方式確實沒問題，但如果還要加上居中的效果，這種方式就有問題，下面會說明。
2、圖片居中顯示
效果圖如下：
PS：為了實現上圖居中的效果，單靠CSS是不行的，還需要JS處理。
例如：
HTML：
<div class="rd-box" style="width:200px;height:200px;overflow:hidden;"> <img src="mao.png"onload="centerThisImg(this, 200, 200)"/> </div>
CSS：
.rd-box{ position: relative; display: inline-block; border-radius: 10px; } .rd-box img{ display: block; border-radius: 10px; }
JS：
//圖片自適應填充，並居中顯示。 function centerThisImg(el, maxWidth, maxHeight){ var $img = $(el), img= $img[0]; var imgHeight = img.naturalHeight, imgWidth = img.naturalWidth, finalWidth, finalHeight, tsffix = ''; var rm = maxWidth / maxHeight, r = imgWidth / imgHeight; if(r < rm){ finalWidth = maxWidth; finalHeight = maxWidth / r; tsffix= 'translateY(-' + (finalHeight - maxHeight) / 2 + 'px)'; } else { finalHeight = maxHeight; finalWidth = maxHeight * r; tsffix = 'translateX(-' + (finalWidth - maxWidth) / 2 + 'px)'; } $img.css({width: finalWidth, height: finalHeight, transform: tsffix}); }
從這一點就可以看到我說的問題，在CSS中我是加上圓角的樣式，但實際上卻沒有圓角效果。
這是因為當我們把圖片居中（不變形）時，我們看到的現在居中的四角，其實是圖片中間部位，真正圖片的四角早在不可見的地方。
所以，想讓居中的圖片再有圓角效果，得另外想辦法。
3、遮擋法模擬出圓角
我們可以用四個內凹三角形，遮擋在圖片四角上（居中後的），讓人誤以為是圖片圓角了。
例如（結合居中的完整程式碼）：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>正方形居中顯示並且圓角</title> <style> img{ height: 200px; } label{ display: block; } .rd-box2{ position: relative; display: inline-block; } .rd-box2 img{ display: block; } .rd-box2 .left-top, .rd-box2 .right-top, .rd-box2 .left-bottom, .rd-box2 .right-bottom{ content: ''; position: absolute; width: 10px; height: 10px; z-index: 1; } .rd-box2 .left-top{ top: 0; left: 0; background: radial-gradient(20px at right bottom,transparent 50%,#F4F4F4 50%); } .rd-box2 .right-top{ top: 0; right: 0; background: radial-gradient(20px at left bottom,transparent 50%,#F4F4F4 50%); } .rd-box2 .left-bottom{ bottom: 0; left: 0; background: radial-gradient(20px at right top,transparent 50%,#F4F4F4 50%); } .rd-box2 .right-bottom{ bottom: 0; right: 0; background: radial-gradient(20px at left top,transparent 50%,#F4F4F4 50%); } </style> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script> //圖片自適應填充，並居中顯示。 function centerThisImg(el, maxWidth, maxHeight){ var $img = $(el), img = $img[0]; var imgHeight = img.naturalHeight, imgWidth = img.naturalWidth, finalWidth, finalHeight, tsffix = ''; var rm = maxWidth / maxHeight, r = imgWidth / imgHeight; if(r < rm){ finalWidth = maxWidth; finalHeight = maxWidth / r; tsffix = 'translateY(-' + (finalHeight - maxHeight) / 2 + 'px)'; } else { finalHeight = maxHeight; finalWidth = maxHeight * r; tsffix = 'translateX(-' + (finalWidth - maxWidth) / 2 + 'px)'; } $img.css({width: finalWidth, height: finalHeight, transform: tsffix}); } </script> </head> <body> <label>正方形居中顯示並且圓角：</label> <div class="rd-box2" style="width:200px;height:200px;overflow:hidden;"> <i class="left-top"></i> <i class="right-top"></i> <i class="left-bottom"></i> <i class="right-bottom"></i> <img src="mao.png" onload="centerThisImg(this, 200, 200)"/> </div> </body> </html>View Code
效果圖如下：
總結：
其實，如果圖片能夠繼承父元素的圓角效果，那麼就不需要這麼麻煩，但是現實是圖片元素四個邊角會超出父元素（設了圓角）。
我實際的測試也是這樣，不過，就不深究了。
本文為原創文章，轉載請保留原出處，方便溯源，如有錯誤地方，謝謝指正。