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

【问题标题】：Image max-width not working in media query图像最大宽度在媒体查询中不起作用
【发布时间】：2017-08-23 15:08:12
【问题描述】：

我在媒体查询中遇到了最大宽度/最大高度的问题。基本上发生的事情是我有一个使用 jQuery 显示模式窗口的图像库。这个模态窗口由模态框、内容框和图像查看器组成，图像查看器内部有一些按钮用于通过图像进行导航）。我在 vw 和 css 中设置了最大宽度/最大高度，但退出按钮在移动设备上被切断。

当前 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;
   }
}

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

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

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

【问题讨论】：

你也可以发布你的标记吗？
尝试对媒体查询使用 % 而不是视口 ...
@MichaelCoker 我刚刚添加了一个 jsfiddle，其中包含我正在使用的东西的 sn-p。
@davvv 我试过了，但是没用

标签： html css responsive-design media-queries

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

有时它们可能会意外出现故障，尤其是在从最小值更改为最大值或反之亦然时。

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

图片的原始尺寸只有 200x133 像素，反之亦然。使用 max-width/ max-height 值，它们永远不会大于原始大小。

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

【讨论】：