如何在css中製作圓形圖像

我對這類事情很陌生，但這是我的問題。我已經看過了幾個問題，它是有道理的，如何使它成爲圓形，但是被製成圓形的圖像被切掉一半，有沒有解決這個問題的方法。我正在使用HTML和CSS。如何在css中製作圓形圖像

circular_image{ 
float:left; 
margin-left:125px; 
margin-top: 20px; 
width: 200px; 
height: 200px; 
border-radius: 100%; 
overflow:hidden; 
background-color: blue;}

來源

2015-02-24 Stefan

使用'邊界半徑：50％' – 2015-02-24 16:19:08

你能不能出現畫面？ – Krii 2015-02-24 16:20:01

謝謝大家的幫助和快速回復：D – Stefan 2015-02-25 19:10:21

你的CSS規則需要一個.（如果有class應用的話）或#在啓動（如果它與id應用）。

此外，如果您將規則應用於圖像的容器，則需要將圖像設置爲相應地重新調整大小以適合圓形;

最後，50%半徑是你所需要的一個圓。

.circular_image { 
 
    width: 200px; 
 
    height: 200px; 
 
    border-radius: 50%; 
 
    overflow: hidden; 
 
    background-color: blue; 
 
    /* commented for demo 
 
    float: left; 
 
    margin-left: 125px; 
 
    margin-top: 20px; 
 
    */ 
 
    
 
    /*for demo*/ 
 
    display:inline-block; 
 
    vertical-align:middle; 
 
} 
 
.circular_image img{ 
 
    width:100%; 
 
}

with container 
 

 
<div class="circular_image"> 
 
    <img src="http://lorempixel.com/500/500/cats/1"/> 
 
</div> 
 

 
<br><br> 
 
directly on image 
 

 
<img class="circular_image" src="http://lorempixel.com/500/500/cats/2"/>

來源

2015-02-24 16:24:54

您必須將border-radius設置爲img本身，而不是包含div。如你所知，圖像是正方形或長方形的，並將它們放入圓圈內，當然會切斷邊界。

img { 
    border-radius: 50%; 
    width: 100px; 
    height: 100px; 
}

這裏是小提琴：http://jsfiddle.net/LLo1u3Ld/2/

來源

2015-02-24 16:20:19

只需添加border-radius:50%;到circular_image類。

下面的NEET代碼....

.circular_image{ 
    float:left; 
    margin-left:125px; 
    margin-top: 20px; 
    width: 200px; 
    height: 200px; 
    border-radius: 50%; /* Modified*/ 
    /*overflow:hidden;*/ 
    background-color: blue; 
}

來源

2015-02-24 16:27:37

如何在css中製作圓形圖像

回答

相關問題