Css 完美圆内部内容高度未知

在不知道圆圈内内容（图像）的确切高度的情况下，我很难弄清楚如何制作一个完美的圆圈

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

下面是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%;
}

---

这是我的小提琴

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

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

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

在小提琴中，由于你使用了填充物，它可能看起来很糟糕。然后，您可能只需要将图像居中放置在容器内

EDIT2:Updated。 编辑：忘记宽度了！等等

如果您对JavaScript解决方案（无jQuery）持开放态度，并使用CSS技巧将其居中：

HTML:

---

使用javascript计算图像的高度，然后更新css？图像是否都具有相同的宽度？能否稍微更改html？可能，取决于更改的程度：DI认为可以使用类似的方法来保持高度和宽度完全相同。如果我有多个巨型标题呢。。。每个人都可以用一个班，不是吗？（我的一把老小提琴：）

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

    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;

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