时间戳

首页 > 解决方案 > 如何应用纵横比媒体查询

css - 如何应用纵横比媒体查询

问题描述

我正在尝试根据图像的初始纵横比修改图像的大小。为此，我在纵横比上创建了 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;
          }
        }

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

标签： cssimagemedia-queriesaspect-ratio

解决方案

我认为您需要一些棘手的问题，如果您将最大纵横比更新为 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>

推荐阅读