【レスポンシブ】画像サイズの”縦横比を維持”してトリミングする裏技

2018/2/24 CSS

縦横比を維持するのは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ファイル

3行目、及び8行目の0.7は、横幅に対して7割の高さを.img-wrapに代入する、ということです。

なので横幅が100pxの場合高さが70pxになるということですね。

ここも任意で調整してみて下さい。

参考にどうぞ。

投稿者:気まぐれWEBLOG管理人