HTML

Question

我的图片来自我的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);

}

Answer 1

HTML

我首先假设$path_image是某种形式的<img src="path/to/image.png">。请注意.display div是不必要的标记;它没有帮助也没有正确阻碍容器显示。它可以安全地移除而不会产生任何影响，但如果需要，您可以将其保留下来。

因此，让我们看看圆形图像最合适的渲染HTML应该是什么样的：

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

CSS

要完成圆形容器，您已正确应用了border-radius样式，但数学已关闭。边界半径可以达到宽度和高度（应该相等，否则结果不会是圆形）。

但是，现在，图像会溢出容器。你必须告诉它隐藏它的溢出，如下：

.circular {
  overflow: hidden
}

使用负边距和宽度和高度样式属性，您可以根据自己的喜好调整容器内的图像大小。

结论

所以，最后，你很可能只需要添加overflow: hidden。可以在此处看到结果的示例：http://jsfiddle.net/Zh5VK/

Answer 2

首先我会建议您的图像尺寸必须与div相符。圆形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

不能将图像放在圆圈内

2 个答案:

HTML

CSS

结论