Question

我有一个宽度为1900，高度为1000的图像，并且我使用的是background-size: contain;和width: 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;
}

问题：大众汽车正在使用滚动条宽度进行计算，但我想不用，我可以使用宽度％代替大众汽车吗？

我接受其他想法，但是我更喜欢使用CSS。

Answer 1

以下内容将保持其长宽比。

长宽比是通过将高度除以宽度来计算的：

1000 / 1900 = 0.5263

要在代码段中看到此代码有些困难，因此这里是一个JSBin link，您也可以调整其大小。

.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>

如何保持响应图像的宽高比？

1 个答案: