Question

我在媒体查询中遇到max-width / max-height问题。基本上发生了什么是我有一个图像库，使用jQuery来显示模态窗口。这个模态窗口包括模态，内容框和图像查看器，其中有一些按钮用于通过图像导航。我在vw中设置了max-width / max-height，在css中设置了vh，但退出按钮在移动设备上被切断了。

当前的CSS：

#photoViewer {
display: inline-block;
position: relative;
margin: 0 auto;
width: 0;
height: 0;
transition: width 0.5s, height 0.5s;
}

#photoViewer img {
position: absolute;
top: 50%;
left: 50%;
max-height: 70vh;
max-width: 70vw;
}

我尝试使用媒体查询：

@media screen and (max-width: 955px) {
   #photoViewer img {
      max-width: 50vw;
      max-height: 50vh;
   }
}

但它没有改变任何东西。我发现如果设置硬“宽度”和“高度”规则它可以工作，但最大似乎把它扔掉。有什么想法吗？

这是一个小提琴，演示了我正在使用的内容（我的整个代码非常大）：

https://jsfiddle.net/jessereitz1/6nxg21a3/3/

Answer 1

至少在你发布的小提琴中它起作用：

图像的原始尺寸仅为200x133px，反之亦然。使用max-width / max-height值时，它们永远不会超过原始大小。

仅当屏幕/视口宽度小于400px时，max-width: 50%才会生效（对于横向模式图像，即 - 肖像甚至更小：窄于266px）。

Answer 2

感谢大家的帮助和见解。我刚刚发现了任何人都可以在他们的代码中发现的最大错误：人为错误和愚蠢。我发现我在代码底部放置了一个相同的CSS规则，将img max-height / width设置为90vh / vw。我现在可以说我已经学会在跳到这里之前滚动浏览我的所有代码！再次感谢！

Answer 3

只是一个FYI ...... 需要注意的另一个人为错误是由于有时工作而浪费了大量时间，有时不是因为媒体查询以错误的顺序列出。

有时它们会出乎意料地出现故障，特别是从最小值变为最大值时，反之亦然。

使用max-width时，请检查以确保所有查询都显示为最大到最小宽度（1200px，然后是992px等）。

使用min-width时，请检查以确保所有查询的宽度最小到最大（576px，然后是768px等）。

Answer 4

另一种可能性是，您在该元素上设置了min-height，它将覆盖您的max-height设置。

图片最大宽度无法在媒体查询

4 个答案: