内部带有图像的 Css 响应圈答案

【问题标题】：Css responsive circle with image inside内部带有图像的 Css 响应圈
【发布时间】：2016-08-22 11:18:55
【问题描述】：

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

这是我尝试过的：

如何使完美的中心圆始终保持蓝色 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>

【问题讨论】：

您只想使用这张图片吗？还是不同的图像？
我会用javascript切换图片，希望不会有什么影响。

标签： css responsive-design geometry

【解决方案1】：

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

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

HTML

<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/

问候

【讨论】：

我可以在更改蓝色 div 高度时使圆圈响应吗？ jsfiddle.net/xnkkrhnt/7
是的，您可以在 .player-thumb 类上设置高度为 100%，但您的 .player-holder 类需要永远是正方形的，例如 300x300 或 400x400... 等等，因为如果你这样做不是方形的，你会在你的图像上得到一个椭圆形。 jsfiddle.net/xnkkrhnt/11

【解决方案2】：

使用背景可能会更好。

试试这个：

.player-holder{
	height:350px;
  max-width:650px;
  background:blue;
}
.player-thumb{
  margin: auto;
	 height: 100%;
   border-radius: 100%;
   overflow:hidden;
   background-color: white;
   background-image: url("http://www.whatcar.com/car-leasing/images/vehicles/medium/100895.jpg");
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center center;
}

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

或者在 jsfiddle 上：here。

另外，
为了制作一个完美的圆圈，您需要一个正方形大小的 div（在您的情况下为 350x350）。
试试这个 jsfiddle：link。

.player-holder {
  height: 350px;
  max-width: 650px;
  min-width: 350px;
  /* assign a min-width */
  background: blue;
}
.player-thumb {
  margin: auto;
  height: 100%;
  width: 350px;
  /* make a fixed width */
  border-radius: 100%;
  overflow: hidden;
  background-color: white;
  background-image: url("http://www.whatcar.com/car-leasing/images/vehicles/medium/100895.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

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

【讨论】：

更新了答案，看看吧。

【解决方案3】：

background-size 可以，但你必须在背景上使用图像。

HTML：

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

CSS：

.player-holder{
   height:350px;
   max-width:650px;
   background:blue;
}
.player-thumb{
   height: 100%;
   border-radius: 100%;
   overflow:hidden;
   background: url(http://www.whatcar.com/car-leasing/images/vehicles/medium/100895.jpg);
   background-repeat: no-repeat;
   background-size: 100% 100%;
}

演示：https://jsfiddle.net/xnkkrhnt/3/

【讨论】：