Question

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

这就是我的尝试：

如何制作完美的中心圆总是100％高度的蓝色div（直到蓝色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，例如：

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/

此致

Answer 2

使用背景可能更好。

试试这个：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

或者在jsfiddle上：here。

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 3

可以使用from sympy import * from math import pi class solarheating: def circular_rr(T0,T,lst,m,Cp,Eg): r = var('r') F = T0+pi*r**2*Eg/(m*Cp)*lst-T r = solve(F,r) return r[1] lst = [0,0.25,0.5,0.75,1.0,1.25] a = circular_rr(20,15,lst,.24,4.2,.928) print(a)，但您必须在背景上使用图片。

HTML：

background-size

CSS：

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

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

Css响应圈内图像

3 个答案: