响应图像高度比例

Question

我的图像是768px x 432px。我让它响应，但我希望根据350px x 250px的值计算宽高比。

我可以用宽度来做，但不能用高度做。

我怎么能这样做？

我在宽度上使用了什么：

.thumb {
    width: 100%;
    max-width: 350px;
}

＆＃13;

＆＃13;

.thumb {
  width: 100%;
  max-width: 350px;
  max-height: 250px;
  height: 100%;
}

＆＃13;

<div class="container">
  <div class="row">
    <div class="col col-md-4">
      <img src="http://lorempixel.com/768/432/technics/" class="thumb">
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用vh / vw标签尝试使用css进行响应式跨平台页面拟合。

例如： vh - 查看高度 vw - viewwidth

.thumb {
  width: 100%;
  max-width: 30vw;
  max-height: 25vh;
  height: 10vh;
}

只是旁注，当您考虑页面宽度时 - 想象整页宽度为100vw，因此无论页面大小如何，30vw基本上都不到页面的三分之一。同样的想法与高度。