带有图像的CSS响应圈 [英] Css responsive circle with image inside

问题描述

蓝色div具有固定的高度和响应宽度，内部应有一个具有相同高度的圆形图像.

Blue div has fixed height and responsive width, inside there should be a circle image with same height.

这是我尝试过的:

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

我如何使完美的中心圆始终保持100％的蓝色div高度(直到蓝色div宽度，因为它小于高度)，并且图像始终覆盖整个圆?

How do I make perfect centered circle always 100% height of blue div (until blue div width because smaller than height) and image always covering full circle?

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

推荐答案

如果您想要一个完美的圆弧，则您的图片必须是正方形的，例如300x300或500x500，但是您的图片是360x270，因此您会得到一个椭圆形的图片.

If you want a perfect circle firts your image needs to be square example 300x300 or 500x500, but your image is 360x270, for that reason you have getting a oval.

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

If you can't make that image a square, you can create a div with dimensions like square, here the example:

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/

致谢

这篇关于带有图像的CSS响应圈的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！