画像最大幅がメディアクエリで機能しない

Question

メディアクエリ内でmax-width/max-heightに問題があります。基本的には、jQueryを使用してモーダルウィンドウを表示する画像ギャラリーがあります。このモーダルウィンドウは、モーダル、コンテンツボックス、および画像を通したナビゲーション用のボタンがいくつかある画像ビューアで構成されています）。私はmax-width/max-heightをvssとvhに設定していますが、exitボタンはモバイルデバイス上で切断されます。

現在のCSS：

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

を、それは何も変更していない：

#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; 
} 

私はメディアクエリを使用してみました。私はハード "幅"と "高さ"のルールを設定すると動作するが、最大の場合はそれを捨てるように見える。何か案は？少なくとも、あなたはそれが動作掲載フィドルで

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

Answer 1

：

ここ

は、私が働いているものの種類を示していフィドル（私の全体のコードはかなり大きい）です画像の元のサイズは200x133px、またはその逆です。 max-width/max-heightの値を指定すると、元のサイズより大きくなることはありません。

画面/ビューポートの幅が400ピクセル未満になると、max-width: 50%は効果を持ちます（横長モードの画像の場合、つまり、さらに肖像画は266ピクセル未満です）。

Answer 2

ご協力いただき、ありがとうございました。私はちょうど誰かが自分のコードで見つけることができる最大のバグを発見：ヒューマンエラーと愚かさ。私は私のコードの下に90gh/vwのimg max-height/widthを設定して、同じCSSルールを配置していることがわかりました。ここで私のコードをすべてスクロールすることを学んだことがあります。再度、感謝します！

Answer 3

ちょうどFYI ... 時々働くことによって多くの時間が浪費され、時にはメディアクエリが間違った順序でリストされていることに注意する別の人的エラーがあります。

場合によっては、特にminからmaxに、またはその逆に変更すると、予期せず異常になることがあります。

max-widthを使用する場合は、すべてのクエリが最小幅から最大幅（1200ピクセル以下、992ピクセルなど）で表示されるようにします。

最小幅を使用する場合は、すべてのクエリが最小幅から最大サイズ（576ピクセル、次に768ピクセルなど）で表示されるようにします。