填充宽高比黑客，但基于高度

Question

大多数人都知道a trick以固定的宽高比制作元素比例，例如：

ObjectMapper mapper = new ObjectMapper(new YAMLFactory());
JsonNode json = mapper.readTree(new File("some.yml"));
System.out.println(json.get("test"));

（jsfiddle https://jsfiddle.net/0dda7939/）

我想要同样的东西，但是基于不是基于宽度的高度。

<div style="width:100%;position:relative">
  <div style="padding-bottom:100%;background:tomato;height:0;">square (1:1)</div>
</div>

如果没有JS并且没有使用VW / VH单元，有没有办法做到这一点（因为父容器可能并不总是窗口）？

Answer 1

使用JS可以轻松完成。 CSS做的问题是应用宽度等于高度。如果您习惯使用SASS，那么您可以这样做。否则，JS（jQuery）解决方案如下：

HTML：

<div class="parent">
      <div class="child">I am a square (1:1)</div>
</div>

CSS：

.parent {
  border: 1px solid black;
  width:auto;
  height: 200px;
  position:relative
}

.child {
  background:tomato;
  height:inherit;
}

JS：

let parentWidth = $('.parent').width();
let parentHeight = $('.parent').height();
let childWidth = $('.child').width();
let childHeight = $('.child').height();
let minSize = 0;
$('.child').width(childHeight);

$(window).on('resize', function () {
  parentWidth = $('.parent').width();
  parentHeight = $('.parent').height();
  childWidth = $('.child').width();
  childHeight = $('.child').height();
  minSize = Math.min(parentWidth, parentHeight);

  if (childWidth >= parentWidth || childHeight >= parentHeight) {
    if (childWidth >= parentWidth && childHeight >= parentHeight) {
      $('.child').height(minSize);
      $('.child').width(minSize);
    } else if (childWidth >= parentWidth) {
      $('.child').width(parentWidth);
      $('.child').height(parentWidth);
    } else {
      $('.child').height(parentHeight);
      $('.child').width(parentHeight);
    }
  } else {
    $('.child').height(minSize);
    $('.child').width(minSize);
  }
});

Answer 2

尝试添加此代码::

view-source:https://www.instagram.com/blackpink_jennie/