Html 图像最大宽度在媒体查询中不起作用

媒体查询中的最大宽度/最大高度有问题。基本上，我有一个使用jQuery显示模式窗口的图像库。此模式窗口由模式、内容框和图像查看器组成，图像查看器内部有一些按钮，用于通过图像进行导航）。我在css中的vw和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;
   }
}

但这并没有改变任何事情。我发现，如果设置严格的“宽度”和“高度”规则，它会起作用，但“最大值”似乎会失去作用。有什么想法吗

这里有一把小提琴，演示了我正在使用的东西（我的整个代码相当大）：

---

至少在您发布的小提琴中，它是有效的：

图像的原始大小只有200x133px，反之亦然。使用

max width

/

max height

值，它们将永远不会超过原始尺寸

---

只有当屏幕/视口宽度小于400px时，

最大宽度：50%

才会产生效果（对于横向模式图像，即-纵向：小于266px）。

至少在您发布的小提琴中，它可以工作：

图像的原始大小只有200x133px，反之亦然。使用

max width

/

max height

值，它们将永远不会超过原始尺寸

---

只有当屏幕/视口宽度小于400px时，

最大宽度：50%

才会产生效果（对于横向模式图像，即-纵向：小于266px）。

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

感谢大家的帮助和洞察力。我刚刚在他们的代码中发现了最大的错误：人为错误和愚蠢。我发现我在代码的底部放置了一个相同的CSS规则，将img最大高度/宽度设置为90vh/vw。我现在可以说，在跳到这里之前，我已经学会了滚动所有代码！再次感谢

仅供参考。。。 另一个需要注意的人为错误是，媒体查询按错误的顺序列出时，有时工作，有时不工作，会浪费大量时间

有时，它们可能会意外地出现故障，尤其是从最小值更改为最大值或从最小值更改为最大值时

使用“最大宽度”时，请检查以确保所有查询从最大宽度到最小宽度（1200px，然后是992px，等等）

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

仅供参考。。。 另一个需要注意的人为错误是，媒体查询按错误的顺序列出时，有时工作，有时不工作，会浪费大量时间

有时，它们可能会意外地出现故障，尤其是从最小值更改为最大值或从最小值更改为最大值时

使用“最大宽度”时，请检查以确保所有查询从最大宽度到最小宽度（1200px，然后是992px，等等）

---

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

另一种可能是您在该元素上设置了

min height

，这将覆盖您的

max height

设置。

另一种可能是您在该元素上设置了

min height

，这将覆盖您的

max height

设置。

您也可以发布标记吗？尝试在媒体查询中使用%而不是视口…@MichaelCoker我刚刚添加了一个JSFIDLE，其中包含我正在使用的内容的片段。@davv我尝试过，但不起作用。您也可以发布标记吗？尝试在媒体查询中使用%而不是视口viewport…@michaelocker我刚刚添加了一个JSFIDLE，其中包含我正在使用的内容的一个片段。@davv我尝试过，但没有成功