目次
縦横比を維持するのはCSSだけでは難しい
実際に横幅100％だったりとかでの対応が多いと思うのですが、
レスポンシブするにあたって、画像の縦横比を維持したまま横幅を％指定したい、という事がありますよね。
その時の実装方法を簡単に説明します。
1,まずはhtmlのimgタグを任意のdivタグで囲う
htmlファイル
|
1 2 3 |
<div class="img-wrap"> <img src="ここに画像パス" alt="ここにaltタグ"> </div> |
2,cssでimgタグを天地中央揃えにする
cssファイル
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.img-wrap img{ max-width: none; width: 130%; position: absolute; top: 50%; left: 50%; margin-right: -50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .img-wrap{ position: relative; overflow:hidden; background-color: #000; } |
.img-wrap imgは親要素の.img-wrapに対して天地中央揃えにします。
.img-wrap imgをwidth 130%にしているのは、元の画像の縦横比と、トリミングする縦横比があまりにも差がある場合に、余白が出てしまうためです。
親の背景色指定で #000 をしているので余白が黒くなります。
なのでここは任意でOKです！余白が出るようなら150%とか160%にして微調整してみて下さい。
absulute指定したことで親要素の.img-wrapの高さがなくなっています。ですので高さをjQueryで指定してあげるという仕組みです。
3,jQueryで親要素の高さ指定をして完了
jsファイル
|
1 2 3 4 5 6 7 8 9 10 |
$(document).ready(function () { var imgWidth = $(".img-wrap").width(); var imgheight = (imgWidth*0.7); $(".img-wrap").css('height',imgheight); }); $(window).resize(function () { var imgWidth = $(".img-wrap").width(); var imgheight = (imgWidth*0.7); $(".img-wrap").css('height',imgheight); }); |
0.7は、横幅に対して7割の高さを.img-wrapに代入する、ということです。
なので横幅が100pxの場合高さが70pxになるということですね。
ここも任意で調整してみて下さい。
参考にどうぞ。