内部有图像的 CSS 响应式圆圈

Question

蓝色div有固定的高度和响应宽度，里面应该有一个相同高度的圆形图像。

这是我尝试过的：

https://jsfiddle.net/xnkkrhnt/1/

如何使完美的中心圆始终为蓝色 div 的 100% 高度（直到蓝色 div 宽度，因为小于高度）并且图像始终覆盖整个圆？

<div class="player-holder">
    <div class="player-thumb"><img src="http://www.whatcar.com/car-leasing/images/vehicles/medium/100895.jpg"/></div>
</div>

Answer 1

如果你想要一个完美的圆形，你的图像需要是正方形，例如 300x300 或 500x500，但你的图像是 360x270，因此你会得到一个椭圆形。

如果您无法将该图像设为正方形，则可以创建一个尺寸类似于正方形的 div，示例如下：

超文本标记语言

<div class="player-holder">
  <div class="player-thumb"></div>
</div>

CSS

.player-holder{
   height:350px;
   max-width:650px;
   background:blue;
   text-align: center;
}
.player-thumb{
   width: 350px;
   height: 350px;
   display: inline-block;
   border-radius: 50%;
   background-image: url(http://www.whatcar.com/car-leasing/images/vehicles/medium/100895.jpg);
   background-size: cover;
   background-position: center;
}

这里是例子： https: //jsfiddle.net/xnkkrhnt/5/

问候