如何应用纵横比媒体查询

Question

我正在尝试根据图像的初始纵横比来修改图像的大小。为此，我在纵横比上创建了 2 个媒体，但由于某些原因，只有第一个 @media 适用于所有图像，而与每个图像的纵横比无关。

@media (min-aspect-ratio: 3/4) {
          .Visible {
    
            max-width: calc(60% - 400px);
            height: auto;
          }
         
    
        }
    
@media (aspect-ratio: 4/3) {
         .Visible {
    
            max-width: calc(60% - 80px);
            height: auto;
          }
        }

我尝试了不同的组合，但仍然没有得到想要的结果。有什么建议吗？

Answer 1

我认为您需要一些棘手的问题，如果您将最大纵横比更新为 3/4 嵌套的最小值并使最小比率为 4/3，那么您的代码将正常工作...

也许您在第一次媒体查询时的问题自 3/4 以来一直执行，而纵横比为 4/3

@media (max-aspect-ratio: 3/4) {
    div {
    background: orange;
  }
}
@media (min-aspect-ratio: 4/3) {
    div {
    background: yellow;
  }
}

<div>
  Watch this element as you resize your viewport's width and height.
</div>