如何响应创建圆形div与中心图像/文本

Question

我正在尝试创建适合每个屏幕大小的响应圈：

我尝试了一些代码，但根据要求，任何人都无法正常工作。

Answer 1

尝试这样的事情：

    <div class="container">
      <div class="circle">
          <img class="image" src="http://lorempixel.com/800/800/">
      </div>
    </div>

    .container {
      width: 100%;
      background: #000;
    }

    .circle {
      border-radius: 50%;
      width: 100%;
      padding-bottom: 100%;
      background: #fff;
      position:relative;
      overflow:hidden;
      z-index:2;
    }
    .image {
      z-index:1;
      position:absolute;
      top:0;
      left:0;
      width:auto;
      max-width:100%;
      height:auto;
      max-height:100%;
    }

圆圈应该适合容器..

请参阅小提琴：http://jsfiddle.net/jimmynewbs/doan8b2f/

然后，您可以在其中为文本/图像创建一个div，并将图像设置为最大宽度100％和宽度自动。这将确保它不会比圆圈更大。如果想要将图像扩展到边缘，那么将图像定位为绝对可以帮助将其保持在圆圈内...

Answer 2

您应该使用SVG或2x res PNG。它与bandwith的大小差不多，但你可以获得更好的控制和更快的渲染速度。