快速响应缩放图像，同时限制宽度和高度

Question

目前我有一张图片，上面有

<img src="logo.png" width="100vw">

如果80vh大于100vw，如何将图像的高度也设置为80vh？

编辑： 在狭窄的设备（例如电话）上，我希望图像占据视口宽度的100％ 在视口宽度的100％超过视口高度的80％的较宽设备上，我希望图像占据视口高度的80％ Example

Answer 1

通过media queries设置断点并定义landscape方向，您可以实现所需的目标。

示例：

@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) {

    img {
        width: 100vw;
        height: 80vh;
}