同様の質問がされていることに気づきました。私はそれらすべてを調査しましたが、特定の状況の修正を見つけることができませんでした.
このデバッグ ページを確認してください。
[削除]
このページを Chrome または Safari で開くと、次の動作に気付くでしょう。
- ブラウザー ウィンドウを水平方向にサイズ変更すると、画像の幅が拡大または縮小されますが、ブラウザー ウィンドウの最大高さは 100% です。
- ブラウザ ウィンドウを垂直方向にサイズ変更すると、高さ 100% が適用され、画像の縦横比に応じて、特定の最大値まで幅が縮小または拡大する場合があります。
上記は、ブラウザ間で配信したい望ましい動作です。ただし、これを Firefox と IE (10) で正しく動作させることはできません。max-height プロパティが尊重されていないようです。その結果、より広いビューポートでは、画像の高さがブラウザー ウィンドウよりも大きくなり、画像が途切れてしまいます。
このページの擬似 HTML 構造は次のとおりです。
html -> body -> image-container -> image-wrapper -> img
img 要素には明示的な幅または高さがインラインで設定されていません。これを CSS で制御します。
#image-container img.tall {
display:block;
max-height:100%;
width:auto;
max-width:100%;
}
他の質問から、img 要素のすべての親要素 (html、body など) を height:100%; に設定する必要があることを読みました。これは私の実装には当てはまりますが、max-height はまだ尊重されていないようで、問題は Firefox と IE でのみ発生します。
注:すべての要素で box-sizing:border-box を使用しています。