比率阻止问题

Question

在一个项目中，我需要以16：9和9:16的比例更改块高。最近我在JS中用于这个任务解决方案。但我更喜欢使用这个纯CSS解决方案：solution link

但我发现了与此相关的问题。请检查JSFiddle查找详细信息JSFiddle

对于16：9的比例，我使用56.25％的填充顶部值9:16我使用117.77％的值。但是在不同的屏幕尺寸下，我的积木会有不同的高度。有没有解决方案可以在纯CSS中修复这个错误？

HTML代码

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 col-sm-6">
      <div class="magazine-item">
        <div class="item-image ratio ratio-horizontal">
          <div class="ratio-container">
            <div class="item-image-inner">
              <div class="item-label">
                Label
              </div>
              <div class="item-tag">
                1 <span class="icon-d-tag"></span>
              </div>
              <a href="#" class="holder" style="background: url('//image.ibb.co/dnNXj5/horizontal.jpg') no-repeat center; background-size: cover;"></a>
            </div>
          </div>
        </div>
        <div class="item-title">
          <a href="">Title</a>
        </div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-3">
      <div class="magazine-item">
        <div class="item-image ratio ratio-vertical">
          <div class="ratio-container">
            <div class="item-image-inner">
              <div class="item-label">
                Label
              </div>
              <div class="item-tag">
                1 <span class="icon-d-tag"></span>
              </div>
              <a href="#" class="holder" style="background: url('//i.imgur.com/XcPBLOU.jpg') no-repeat center; background-size: cover;"></a>
            </div>
          </div>
        </div>
        <div class="item-title">
          <a href="">Title</a>
        </div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-3">
      <div class="magazine-item">
        <div class="item-image ratio ratio-vertical">
          <div class="ratio-container">
            <div class="item-image-inner">
              <div class="item-label">
                Label
              </div>
              <div class="item-tag">
                1 <span class="icon-d-tag"></span>
              </div>
              <a href="#" class="holder" style="background: url('//i.imgur.com/XcPBLOU.jpg') no-repeat center; background-size: cover;"></a>
            </div>
          </div>
        </div>
        <div class="item-title">
          <a href="">Title</a>
        </div>
      </div>
    </div>
        <div class="col-xs-12 col-sm-3">
      <div class="magazine-item">
        <div class="item-image ratio ratio-vertical">
          <div class="ratio-container">
            <div class="item-image-inner">
              <div class="item-label">
                Label
              </div>
              <div class="item-tag">
                1 <span class="icon-d-tag"></span>
              </div>
              <a href="#" class="holder" style="background: url('//i.imgur.com/XcPBLOU.jpg') no-repeat center; background-size: cover;"></a>
            </div>
          </div>
        </div>
        <div class="item-title">
          <a href="">Title</a>
        </div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-3">
      <div class="magazine-item">
        <div class="item-image ratio ratio-vertical">
          <div class="ratio-container">
            <div class="item-image-inner">
              <div class="item-label">
                Label
              </div>
              <div class="item-tag">
                1 <span class="icon-d-tag"></span>
              </div>
              <a href="#" class="holder" style="background: url('//i.imgur.com/XcPBLOU.jpg') no-repeat center; background-size: cover;"></a>
            </div>
          </div>
        </div>
        <div class="item-title">
          <a href="">Title</a>
        </div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-6">
      <div class="magazine-item">
        <div class="item-image ratio ratio-horizontal">
          <div class="ratio-container">
            <div class="item-image-inner">
              <div class="item-label">
                Label
              </div>
              <div class="item-tag">
                1 <span class="icon-d-tag"></span>
              </div>
              <a href="#" class="holder" style="background: url('//i.imgur.com/XcPBLOU.jpg') no-repeat center; background-size: cover;"></a>
            </div>
          </div>
        </div>
        <div class="item-title">
          <a href="">Title</a>
        </div>
      </div>
    </div>
  </div>
</div>

CSS代码

.ratio {
    width: 100%;
    display: -webkit-box;
    display: flex;
    position: relative;
    overflow: hidden
}

.ratio:after {
    display: block;
    content: ''
}

.ratio.ratio-vertical:after {
    padding-top: 117.77%
}

.ratio.ratio-horizontal:after {
    padding-top: 56.25%
}

.ratio .ratio-container {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0
}