Question

我的图像是矩形的，具有不同的比例和图像大小。我想将它们放在一个100x100px的圆圈中。

图像上方和下方圆圈内的空白区域用背景色填充。

到目前为止，我有这个 - 它几乎就在那里，但旗帜没有水平居中，圆角应该剪掉旗帜。

  <div id="enclosure">
      <div id="image-container">
        <img src="http://aiatsis.gov.au/sites/default/files/images/galleries/aboriginal_flag/aboriginal_flag.jpg"/>
      </div>
  </div>

#enclosure {
    display: inline-block;
    width: 100px;
    background-color: white;
}

#image-container {
    height: 0;
    padding-bottom: 100%;
    background-color: silver;
    border-radius: 50%;
}

https://jsfiddle.net/sean123456789/jpcnony4/

Answer 1

您的border-radius正在处理图片容器，但不在图片上，所以您需要在图片容器中使用overflow:hidden，这会隐藏图片中的部分，而不是div

#image-container {
    height: 0;
    padding-bottom: 100%;
    background-color: silver;
    border-radius: 50%;
    width: 100px;
    overflow:hidden
}
#image-container img {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

工作小提琴：https://jsfiddle.net/jpcnony4/4/

将矩形图像包含在带衬垫的圆圈中

1 个答案: