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

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;
}