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

縦横比を維持するのはCSSだけでは難しい

実際に横幅100％だったりとかでの対応が多いと思うのですが、

レスポンシブするにあたって、画像の縦横比を維持したまま横幅を％指定したい、という事がありますよね。

その時の実装方法を簡単に説明します。

1,まずはhtmlのimgタグを任意のdivタグで囲う

htmlファイル

<div class="img-wrap">
	<img src="ここに画像パス" alt="ここにaltタグ">
</div>

2,cssでimgタグを天地中央揃えにする

cssファイル

.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ファイル

$(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);
});

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

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

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

参考にどうぞ。