Question

我在弄清楚如何在不知道圆圈内的内容（图像）的确切高度的情况下制作完美的圆圈时遇到了问题。

我有多个图像（巨型标题），周围有圆圈，但里面的图像高度不同。我怎么能拥有它所以它看起来像一个完美的圆圈？每一个人。

以下

  .jumbo-title {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-color: red;
  padding: 50px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}

这是我的小提琴http://jsfiddle.net/HA3bQ/49/

Answer 1

你可以使用这个简单的jquery：

var cw = $('.jumbo-title').width();
$('.jumbo-title').css({
    'height': cw + 'px'
});

基本上jquery将检查你的元素宽度，并将相同的数字（px）添加到高度

<强> FIDDLE

在小提琴中，由于你使用的填充物，它可能看起来很糟糕。那么你可能只需要将图像置于容器中心

Answer 2

EDIT2：已更新。编辑：忘记宽度！坚持！

如果您对JavaScript解决方案（没有jQuery）开放，并使用CSS技巧来集中它：

HTML：

<div class="jumbo-title">
    <div class="living-icon"></div>
    <span class="middle"></span>
    <img src="http://placehold.it/350x150" alt="Relaxed Living">
</div>

JS：

    function init() {
        var images = document.getElementsByTagName('img');
        for(var i = 0; i < images.length; i++) {
            images[i].parentElement.style.height = Math.max(images[i].width, images[i].height) + "px";
            images[i].parentElement.style.width = Math.max(images[i].width, images[i].height) + "px";
        }
    }
    window.onload = init;

CSS：

.jumbo-title {
     position: absolute;
     top: 50%;
     left: 50%;
     margin-right: -50%;
     transform: translate(-50%, -50%);
     background-color: red;
     padding: 50px;
     -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
     -ms-border-radius: 50%;
     border-radius: 50%;
     white-space: nowrap;
     text-align: center;
  }
 .jumbo-title img {
      vertical-align: middle;
 }
 .middle {
      display: inline-block;
      height: 100%;
      vertical-align: middle;
 }

http://jsfiddle.net/HA3bQ/54/

Perfect Circle内部内容高度未知

2 个答案: