目次
縦横比を維持するのはCSSだけでは難しい
実際に横幅100％だったりとかでの対応が多いと思うのですが、
レスポンシブするにあたって、画像の縦横比を維持したまま横幅を％指定したい、という事がありますよね。
その時の実装方法を簡単に説明します。
1,まずはhtmlのimgタグを任意のdivタグで囲う
htmlファイル
2,cssでimgタグを天地中央揃えにする
cssファイル
.img-wrap imgは親要素の.img-wrapに対して天地中央揃えにします。
.img-wrap imgをwidth 130%にしているのは、元の画像の縦横比と、トリミングする縦横比があまりにも差がある場合に、余白が出てしまうためです。
親の背景色指定で #000 をしているので余白が黒くなります。
なのでここは任意でOKです！余白が出るようなら150%とか160%にして微調整してみて下さい。
absulute指定したことで親要素の.img-wrapの高さがなくなっています。ですので高さをjQueryで指定してあげるという仕組みです。
3,jQueryで親要素の高さ指定をして完了
jsファイル
0.7は、横幅に対して7割の高さを.img-wrapに代入する、ということです。
なので横幅が100pxの場合高さが70pxになるということですね。
ここも任意で調整してみて下さい。
参考にどうぞ。