如何將奇數形狀的圖標變爲「圓形」？

-2

問題：我有一個不規則形狀的網站上的2個圖標。我正在向他們添加padding,background-color和border-radius。在某些屏幕尺寸下，背景色看起來像一個圓圈，但在其他屏幕上，它開始看起來像一個橢圓形（我不想）。

的jsfiddle： http://jsfiddle.net/CSS_Apprentice/gv2wne9o/

HTML：

<div class="left"> 
    <img src="http://placehold.it/83x111" alt="icon" /> 
</div> 

<div class="right"> 
    <img src="http://placehold.it/83x111" alt="icon" /> 
</div>

CSS：

img { 
    border-radius: 100%; 
    background-color: #555555; 
    padding: 10%; 
}

來源

2015-04-21 CSS Apprentice

你想讓它變成方形嗎？那麼爲什麼要放一個邊界半徑呢？ – Sidd

我希望它是「正方形」，所以100％邊界半徑將使其完美圓形 –

@CSSApprentice然後它是一個圓形，而不是一個正方形... –

工作的jsfiddle：http://jsfiddle.net/gv2wne9o/1/（適用於兩個圖標之一）

只需設置一個邊界半徑不打算這樣做，在這種情況下。由於您的圖標尺寸爲橢圓形（83 * 111），因此您需要設置沒有頂部和底部填充的左側和右側填充。

假設你的圖標是一個內嵌塊元素，你可以使用下面的代碼來確定要添加多少左右填充，直到元素的寬度等於高度。

var img = document.querySelector('img'); 
var padding = 0; 

while(img.offsetWidth < img.offsetHeight){ 
    img.style.paddingLeft = (++padding)+"%"; 
    img.style.paddingRight = padding+"%"; 
}

來源

2015-04-21 08:57:25 Sidd

優秀！非常感謝，併爲此感到抱歉！ –

Check this out

img{ 
 
    border-radius:0px; 
 
    background-color: #555555; 
 
    padding: 10%; 
 
    }

編輯：

定義廣場：平面圖形具有四個相等的直邊和四個直角。

您沒有4個相等的面，因此您正在使用RECTANGLE。

來源

2015-04-21 08:45:52 Bill

這是一個矩形:( –

你開玩笑權Spoonfeed在這裏我們去; http://jsfiddle.net/2m4dnhng/ 1/ – Bill

是的，但是我說的這個問題的圖標是不是111x111他們是83x111 –

-2

兄弟，你把「邊界半徑：100％」，你還期望什麼？任何在網站上正確使用的邊界半徑必須爲「1％-5％」。當你在任何地方提供「邊界半徑：50％」以上的高價值時，它將是橢圓形，並且「在100％」時它將是圓圈。有什麼問題？

border-radius:5px

嘗試把邊界半徑正因爲如此，你將得到與非尖端點適當不散！希望，解決了這個問題！快樂的編碼！

來源

2015-04-21 08:52:03 Deadpool

高度和寬度值將使該矩形，而不是正方形：/ –

Nopse，但是更高的寬度和高度，你走，你越增加邊界半徑，更多的曲率會提供的，以及高度=寬度= X就會變成方形，而如果高度！=寬度，它會變成橢圓形。所以，把邊界半徑值也少得多（近15％），並且不要低估「邊界半徑」的力量，曲率變彎曲div的整個長度，不僅在角落更高的價值！ – Deadpool

如何將奇數形狀的圖標變爲「圓形」？

回答

相關問題