我有一個圖像在我的PHP代碼中出現。我的圖像顯示成功。唯一的問題是我可以將它插入圓圈。它顯示在圓圈上方。任何想法如何將其放置在圓內？不能將圖像放置在圓圈內

<?php 
//$path_img is the image 
<div class='circular'><div class='display'> $path_img </div></div> 
?>

和我的CSS如下：

.circular { 

width: 50px; 
height: 50px; 
border-radius: 50px; 
-webkit-border-radius: 150px; 
-moz-border-radius: 150px; 
box-shadow: 0 0 8px rgba(0, 0, 0, .8); 
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8); 
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8); 

}

來源

2013-12-08 user2491321

這聽起來不像PHP問題，只是一個CSS問題。你能發表一個你想要輸出結果的例子嗎？ – Matthew

的HTML

我要去假設$path_image開始就是某種形式的<img src="path/to/image.png">。請注意，.display div是不必要的標記;它不會幫助也不妨礙容器正確顯示。它可以安全無任何影響刪除，但如果需要，你可以將它留在

因此，讓我們檢查出的圓形圖像的最合適呈現的HTML應該是什麼樣子：

<div class="circular"> 
    <img src="path/to/image.png"> 
</div>

的CSS

要完成一個圓形容器，您正確應用了邊框半徑樣式，但是數學已關閉。你可以有一個高達寬度和高度的邊界半徑（它應該是相等的，否則結果將不會是圓的）。

現在，雖然圖像會溢出容器。你必須告訴它隱藏其溢出，像這樣：

.circular { 
    overflow: hidden 
}

使用負利潤率和寬度和高度樣式屬性，你可以在容器根據自己的喜好內調整圖像大小。

結論

所以，到最後，你最有可能只是需要加入overflow: hidden。結果的一個例子可以在這裏看到：http://jsfiddle.net/Zh5VK/

來源

2013-12-08 14:34:21 bakkerjoeri

非常有幫助謝謝 – user2491321

順便知道爲什麼它在所有的探險家而不是歌劇中工作？任何想法如何解決它的歌劇？ – user2491321

沒有線索。除非你使用Opera Mini，否則應該沒問題; caniuse.com說，除了Opera Mini以外，其他所有軟件都支持border-radius和box-shadow（除了border-radius，Internet Explorer 8並不直接支持該功能）。 – bakkerjoeri

起初我會建議你圖像的大小必須適合div的意思.circular div的寬度和高度是50px所以圖像大小必須是50px的寬度和高度。

Check the code it will fit properly! 
<!DOCTYPE html> 
<html> 
<head><meta charset="utf-8" /> 
<title>Ollema Records Online Drum and Bass Radio</title> 
<style> 
.circular { 

width: 50px; 
height: 50px; 
border-radius: 50px; 
-webkit-border-radius: 50px; 
-moz-border-radius: 50px; 
box-shadow: 0 0 8px rgba(0, 0, 0, .8); 
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8); 
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8); 

} 
.display { 
    background-image: url("logo.jpg"); 
    height: 50px; 
    margin: 0 auto; 
    text-indent: -9999px; 
    width: 50px; 
} 
</style> 
</head> 
<body> 
<div class='circular'><div class='display'>Logo Here</div></div> 
</body> 
</html>

我發佈了一個網頁圖片部分，與以前的CSS代碼適合圖像。我認爲這是所需的答案！ enter image description here

來源

2013-12-08 15:01:49

不能將圖像放置在圓圈內

回答

的HTML

的CSS

結論

相關問題