背景画像等をレスポンシブデザインでも縦横比をぴったり固定する方法 | スターフィールド株式会社レスポンシブデザインでリピートしないタイプの背景画像があると悩んでいました。 デバイスによって、横幅が違うため、自ずと要素の横幅が変わる中でどのように背景画像を指定すればいいのだろうか・・・と。 「その要素は横幅が固定です。」となればいいのですが、そういうわけにもいかないと思います。 これは背景画像だけでなく、iframeや動画の埋め込みなんかもこのようなことが起きるかと思います。 この問題を解決する方法を少し前に発見したので記載したいと思います。 ちなみに今までの対処法としては、ブレークポイントに合わせて都度高さの設定を行っていました。 そのブレイクポイントの解像度のデバイスならいいんですが、それ以外だと崩れて見えてしまっていました。 新しい方法の説明する前に、DEMOをご覧ください。 わかりづらいかもしれませんが、今までの方法と新しい方法を２つを載せています。 ブラウザを縮めてみ
