如何使用CSS在网页中的圆形部门内拟合矩形图像?我应该在尝试这样做时要记住什么

Question

我是一个想学习的初学者，请帮助。

---

div {
    height:100px;
    width:100px;
	display: inline-block;
	margin-left: 5px;
	border-radius:100%;
	border: 2px solid black;
	
}
#archenemies{
  border:4px solid #cc0000;
  background-image:"http://static.comicvine.com/uploads/original/11119/111193741/4458205-1304230669-friez.png";
  background-size:90%;
}

Answer 1

方法1-使用背景图像。

创建圆形div时要牢记的事情 -

1。边界 - 拉迪乌斯：50％或更多

2。覆盖

的背景 - IMGAGE-大小

3。中心的背景位置

以下是工作代码。

div {
  height: 100px;
  width: 100px;
  display: inline-block;
  margin-left: 5px;
  border-radius: 50%;
  border: 2px solid black;
  border: 4px solid #cc0000;
  background-image: url(http://static.comicvine.com/uploads/original/11119/111193741/4458205-1304230669-friez.png);
  background-size: cover;
  background-position: center center;
}

<div> </div>

方法2-使用IMG SRC

div {
  width: 100px;
  height: 100px
}
img {
  border-radius: 50%;
  width: 100%;
  height: 100%;
  border: 4px solid red
}

<div><img src="http://static.comicvine.com/uploads/original/11119/111193741/4458205-1304230669-friez.png" /></div>

Answer 2

sory如果我忽略了您的高度和宽度设置！

.circle {
    width: 200px;
    height: 200px;
    border: 1px solid black;
    border-radius: 100px;
    background-image: url('http://static.comicvine.com/uploads/original/11119/111193741/4458205-1304230669-friez.png') ;
    background-size: 100px;   
    background-position:50%;
    background-repeat:no-repeat;

<div class="circle"></div>