css - Perfect Circle内部内容高度未知

Question

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

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

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

这是我的 fiddle http://jsfiddle.net/HA3bQ/49/

Answer 1

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/