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

这是我的fiddlehttp://jsfiddle.net/HA3bQ/49/

Answer 1

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

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

基本上 jquery 将检查您的元素宽度并将相同的数字 (px) 添加到高度

FIDDLE

在 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内部内容高度未知

Perfect Circle internal content height unknown

css

css-shapes