Php 无法将图像放置在圆内_Php_Css

Php 无法将图像放置在圆内

php css

Php 无法将图像放置在圆内,php,css,Php,Css,我有一个图像来自我的php代码。我的图像显示成功。唯一的问题是我可以把它插入圆中。它显示在圆圈上方。知道怎么把它放在圆圈里吗 <?php //$path_img is the image <div class='circular'><div class='display'> $path_img </div></div> ?> HTML 我首先假设$path\u image是的某种形式。请注意，.displaydiv是不必要的标记；

我有一个图像来自我的php代码。我的图像显示成功。唯一的问题是我可以把它插入圆中。它显示在圆圈上方。知道怎么把它放在圆圈里吗

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

HTML 我首先假设

$path\u image

是

的某种形式。请注意，

.display

div是不必要的标记；它既不会帮助也不会妨碍容器的正确显示。它可以安全地移除而不会产生任何影响，但如果需要，您可以将其留在里面

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

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

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

结论

因此，最后，您很可能只需要添加

overflow:hidden

。这里可以看到一个结果示例：

首先，我建议您的图像大小必须与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>

检查代码是否合适！
Ollema在线录制鼓和低音收音机
.通告{
宽度：50px；
高度：50px；
边界半径：50px；
-webkit边界半径：50px；
-moz边界半径：50px；
盒影：0.08像素rgba（0,0,0,8）；
-webkit盒阴影：0 0 8px rgba（0,0,0,8）；
-moz盒阴影：08pxrgba（0,0,0,8）；
}
.展示{
背景图片：url（“logo.jpg”）；
高度：50px；
保证金：0自动；
文本缩进：-9999px；
宽度：50px；
}
这里的标志

我已经发布了一个网页图像部分，与以前的css代码适合的图像。我认为这是必要的答案！

这听起来不像是PHP问题，只是CSS问题。你能给出一个你想要的输出的例子吗？顺便问一下，你知道为什么它在所有的探险者身上工作，而不是在opera上吗？你知道怎么为歌剧修吗？不知道。除非你用的是Opera Mini，否则应该没问题；caniuse.com说，除了Opera Mini之外，border radius和box shadow都支持（除了border radius，InternetExplorer 8不直接支持）。

.circular {
  overflow: hidden
}

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>