圖像最大寬度在媒體查詢中不起作用

Question

我在媒體查詢中遇到了 max-width/max-height 的問題。 基本上發生的事情是我有一個使用 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;
   }
}

但它並沒有改變任何東西。 我發現如果設置嚴格的“寬度”和“高度”規則它可以工作，但 max- 似乎把它扔掉了。 有任何想法嗎？

這是一個演示我正在使用的東西的小提琴（我的整個代碼非常大）：

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

Answer 1

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

圖片的原始尺寸只有 200x133px，反之亦然。 使用max-width / max-height值，它們永遠不會大於原始尺寸。

只有當屏幕/視口max-width: 50%小於 400 像素時， max-width: 50%才會有效果（對於橫向模式圖像，即 - 縱向更小：小於 266 像素）。

Answer 2

感謝大家的幫助和見解。 我剛剛發現了任何人都可以在他們的代碼中找到的最大錯誤：人為錯誤和愚蠢。 我發現我在代碼底部放置了一個相同的 CSS 規則，將 img max-height/width 設置為 90vh/vw。 我現在可以說我已經學會了在跳到這里之前滾動瀏覽我的所有代碼！ 再次感謝！

Answer 3

僅供參考......另一個需要注意的人為錯誤會浪費大量時間，因為有時工作有時不工作是媒體查詢以錯誤的順序列出。

有時它們可​​能會意外失序，尤其是在從 min 更改為 max 時，反之亦然。

使用 max-width 時，請檢查以確保所有查詢都顯示為從最大到最小的寬度（1200 像素，然后是 992 像素等）。

使用 min-width 時，請檢查以確保所有查詢的寬度都從最小到最大（576px，然后是 768px 等）。

Answer 4

另一種可能性是您在該元素上設置了min-height ，這將覆蓋您的max-height設置。