Question

我用这行代码创建了一个圆形div：

style="width: 25%; height: auto; padding-top: 25%; margin-left: 37.5%; border-radius: 50%; background-color: #00e5c9; overflow: hidden; bottom: 0;">

然而，当我在其中添加图像时，它会扩展并因此变成椭圆形。有没有办法保持圆圈没有不均匀的扩展？我想补充一点，因为我试图创建一个响应式页面，所以用像素确定宽度和高度是不合适的。

谢谢！

Answer 1

您可以在position:absolute上使用img。

实施例

 img{
  position:absolute;
  width:200px;
  height:200px;;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%)

}

下面的代码段

#d {
  position: relative;
  width: 25%;
  height: auto;
  padding-top: 25%;
  margin-left: 37.5%;
  border-radius: 50%;
  background-color: #00e5c9;
  overflow: hidden;
  bottom: 0;
}

#d img {
  position: absolute;
  width: 100px;
  height: 100px;
  ;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

<div id="d">
  <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSzQljZiYwAlULvViQAWNnBaIz4r_61X09p2lcgZCTVrEBN4Rot"></div>

圆圈div没有调整大小

1 个答案: