質問: レスポンシブサイトです。 SP表示のときだけ、画像を画面の高さ100%で表示させようとすると、 幅も100%になってしまい縦長の画像になってしまいます。 比率を保ったまま表示させるにはどうしたらよいでしょうか。 ``` div.topimage { width: 100%; height: 700px; overflow: hidden; } div.topimage img { width: 100%; } @media screen and (max-width: 740px) { div.topimage { height: 100vh; width:auto; } div.topimage img { height: 100vh; width: auto; } } ```
回答: **動くサンプル:** 書かれている内容で問題なく動作するように思うのですが、他のCSSなどが影響していませんか? 【開発者ツールを使おう! カスタマイズするphpファイルを探す-その1 | RYUS blog】 【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】 【第1回 詳説:デベロッパーツールの使い方:Google Chrome版Firebug:デベロッパーツール取扱説明書|gihyo.jp ... 技術評論社】