圖片圓角並居中顯示解決方案
摘要：
1、圖片圓角顯示
例如（非常簡單）：
HTML：
<img src="mao.png" />
CSS：
img{
border-radius: 10px;
}
如果圖片只為圓角，這種方式確實沒問題，但如果還要加上居中的效果，這種方...
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});
}
PS： 圖片的長寬是不定的，為了讓圖片不變形的鋪滿父容器，需要重新計算圖片長寬，並計算居中需要位移的距離。
從這一點就可以看到我說的問題，在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{
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
效果圖如下：
總結：
其實，如果圖片能夠繼承父元素的圓角效果，那麼就不需要這麼麻煩，但是現實是圖片元素四個角會超出父元素（設了圓角）。
我查閱了資料，有人說這種行為是瀏覽器預設特性，就是這樣效果（ ofollow,noindex">https://stackoverflow.com/questions/8582176/should-border-radius-clip-the-content ）。
我實際的測試也是這樣，不過，就不深究了。
本文為原創文章，轉載請保留原出處，方便溯源，如有錯誤地方，謝謝指正。