ちょっと前までGoogleマップをレスポンシブにするために、以下の方法を使わせていただいていました。 @media (max-width: 767px) { iframe { width: 100% !important; } } とても便利な方法なのですが、これだと横幅はちゃんとレスポンシブになるのですが、高さはPC版に埋め込んだソースをそのまま引き継ぐので、ちょっと間延びした印象になってしまいます。 何かいい表示方法はないかなあと探していた時、lifehackerさんの記事で以下のコードが紹介されていました。以下のコードの「75%」の部分を変更することで、地図の縦横比を変えることができます。 .google-maps { position: relative; padding-bottom: 75%; /*これが縦横比*/ height: 0; overflow: hidden; }
![Googleマップをスマートフォンでも最適な大きさで表示しよう! - Design Color](https://cdn-ak-scissors.b.st-hatena.com/image/square/3fd4728937cba1802e20a81ca1567a8a1eb22eec/height=288;version=1;width=512/https%3A%2F%2Fdesigncolor-web.com%2Fwp-content%2Fuploads%2F2013%2F12%2Fgoogle-maps-smartphone_thumb.jpg)