MASANAO MAEDA
PORTFOLIO

模写コーディングをする際に、まず最初にぶつかった壁です。模写サイトが画像の縦横比を維持したままレスポンシブ対応がされていたのですが、これが全然できませんでした。これを解決したのが「パディングハック」という方法でした。やり方はそこまで難しくないのですが、初心者ということもあり、ここに辿り着くのにかなりの時間を要しました。

パディングハック

まずは画像を入れる箱と、その外にもう一つ箱を用意します。

　　　　.blog_single_picbox {
  position: relative;
  padding-top: 50%;
}
        

外の箱に「position: relative;]をかけ、そして「padding-top」で実装したい比率を指定します。ここでは「50%」で指定してますので、これで「２：１」の比率になります。

次に実際に画像を入れる箱にも記述します。

　　　　.blog_single_pic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
        

中の箱に「position: absolute;」をかけ。「top: 0;」「left: 0;」で指定します。これで外の箱に中の箱が入る形になります。「width」と「height」の指定も必須です。
これで縦横比を維持したままレスポンシブ対応をすることが可能になります。

感想・まとめ

やり方自体はそこまで難しくないので、今ではすぐに記述することができますが、最初にこのやり方を見つけ実際に実装できた時はめちゃくちゃ感動しました。メディアクエリも使わずに画像のレスポンシブができるので、非常に便利だと感じました。今後もこの「パディングハック」は愛用していくと思います。

参考サイト