带有图像的响应式圆形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>

- Toniq

---

你想使用这张图片吗？还是其他的图片？ - MohammadReza Mahmoudi

我将使用 JavaScript 切换图像，希望这不会有任何影响。 - Toniq

Answer 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/ 问候。

- Radames E. Hernandez

---

当我改变蓝色div的高度时，我能使圆形响应吗？https://jsfiddle.net/xnkkrhnt/7/ - Toniq

是的，您可以将类.player-thumb的宽度和高度设置为100％，但您的类.player-holder需要是正方形，例如300x300或400x400等。因为如果您不是正方形，您的图像将呈椭圆形。 https://jsfiddle.net/xnkkrhnt/11/ - Radames E. Hernandez

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

- pol

---

更新了答案，请查看。 - pol

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

- MohammadReza Mahmoudi