縦横比率を維持しつつ、横幅に合わせて画像を囲うボックスのheightを可変的に取る
仕事(アルバイト)でWebページを弄っている。widthとの比率が考慮されたheightを可変的に取らなければならない問題があり、cssだけでなんとかできないものかと考えていたが、思いつかなかったのでjqueryを使った話。
@530506 画像をimgタグでベタ貼りした時のように、ウィンドウの横幅に合わせて画像が拡大縮小表示されなければならないのだが、この時当然画像の高さが拡大縮小に応じて可変であるので、画像を囲うボックスのheight数値をベタ打ちできない。
— roκi (@530506) 2017年2月13日
@530506 こういう。https://t.co/8ST0YCSxla
— roκi (@530506) 2017年2月13日
画像の横幅を囲うボックスのwidthを100%にし、その実際のサイズ値をjqueryで取得、元の画像の縦横比率が合うように横幅からその比率分を除算して縦幅をcssに書き込んでいる。
何かもっとスマートな方法はないだろうか。
