css - 在限制宽度和高度的情况下响应地缩放图像

Question

目前我有一张图片:

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

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

编辑:在窄设备(例如手机)上，我希望图像占据视口(viewport)宽度的 100%在 100% 视口(viewport)宽度超过 80% 视口(viewport)高度的较宽设备上，我希望图像占据视口(viewport)高度的 80% Example

Answer 1

您可以通过媒体查询设置断点并定义横向方向来实现您想要的。

例子:

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

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