如何保持响应的图像纵横比？

Question

我有一个宽度为1900和高度为1000的图像，我使用的是background-size：包含；和宽度：100%；但我希望div高度与图像更改的高度相同。

示例：

在1366个屏幕中，图像将缩小尺寸以适应屏幕大小（宽度100%），因此，图像高度也将减小，因此我想获得该高度。

我试图做的是：

HTML：

<header>
    <section class="bg"></section>
</header>

CSS：

header .bg {
    background-image: url('header.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: calc((100vw * 1000) / 1900);
    float: left;
}

问题：vw是用滚动条宽度计算的，我想要没有，我可以使用宽度%而不是vw吗？

我接受别人的想法来做这件事，但我更喜欢使用CSS。

Answer 1

以下内容将保持其纵横比。

通过将高度除以宽度来计算纵横比：

1000 / 1900 = 0.5263

在代码段中很难看到这一点，因此这里有一个JSBin链接，您也可以调整其大小。

.image-wrapper {
  height: 0;
  position: relative;
  padding-bottom: 52.63%; /* 1900:1000 */
}
.image-wrapper .image {
  background-image: url('http://via.placeholder.com/1900x1000');
  background-repeat: no-repeat;
  background-size: contain;
  height: 100%;
  left: 0;	  
  position: absolute;
  top: 0;	
  width: 100%;	
}

<div class="image-wrapper">
    <div class="image"></div>
</div>