こんにちは！ワタナベです。
あけましておめでとうございます！
本年もどうぞよろしくお願いしますm(__)m
年末年始～現在にかけて体調不良をこじらせておりマシタ。
インフルエンザなどなんか色々流行っているので皆様もお気を付けください。
以前、
http://d-grip-server.sakura.ne.jp/blog/seisaku/3083
↑↑↑のような記事を書いたのですが、サムネイルの場合、object-fitの方が超絶楽だし中央でトリミングしてくれてキレイだと思ったけど高さのレスポンシブどうしたらいいんだ…と悩んでいたのですが、この間解決してめちゃくちゃ便利というか神だったので今回はそれについて書きます(｀・ω・´)ゞ
【おさらい】object-fitとは？
皆様ご存じかと思いますが一応。
img {
width: 600px;
height: 400px;
object-fit: cover;
}
↑みたいにimgにトリミングしたいサイズを指定して、「object-fit:cover;」を指定すると、比率を保ちながら中央でトリミングしてくれます。
※IEで使用するときはjsがないと動かないので注意→ object-fit-images
cover以外の値などもっと詳しく知りたいかたはこちらに変わりやすく書かれていてオススメです。↓↓↓
object-fitでトリミングした画像を比率を保ってレスポンシブさせる
img{
width: 100%;
height: 60vw; /* 任意の高さ */
object-fit: cover;
font-family: ‘object-fit: cover;’; /* 【js】 IE対策 */
}
heightを「vw」で指定してあげるだけで横幅に合わせて高さも変わってくれます。
vwで指定するのがポイントです。
vwとは？
vw（viewport width）：viewportの幅の1/100
viewportの幅はブラウザのスクロールバーのとこまで含んだサイズです。
大きさは、「ビューポート ＞ html ＞ body」となるので、要素にwidth:100vw;を設定すると、html、bodyよりもサイズが大きくなってしまい、横スクロールが出てしまうらしいです。
なので横幅いっぱいで「vw」は厳禁！
話がそれました。
vwとかvhについてkwsk知りたい方はコチラへ↓↓↓
vwはviewportの幅の1/100、1%ということで、viewportが500pxの場合、要素がheight:10vw;だと、height:50px;となるわけです！
………つまり
例えば、基準となるviewportの幅が375px（iphone6/7/8）だとします。
それを基準に、height:60vwと指定すると、
375px×60vw÷100=225px（viwport375pxの時表示される画像の高さ）
となります。
そこを基準に、viewportの幅が768px（iPad）になった時は、
768px×60vw÷100=461px
となるわけです。
という事は、vwの数字を出すには、
vwを指定したい画像の高さ(px)÷viewportの幅×100
となります。多分。（算数ダメなので自信は無いです）
高さやviewportの幅の数字によっては中途半端な数字になるので、小数点はお好みで切り捨てるなりなんなり。
自分は計算めんどくさいので目分量でやってしまうことが多いです
※viewportの幅に合わせて縮んだり伸びたりするので、サイトの最大幅が決まっている場合は、max-widthやmax-heightを指定しておくこと！
指定しないと、viewportが広がっていくのに合わせて、vwを指定した要素もどんどん伸びていきます。どこまでも…どこまでも…
トリミングのcss毎回ダルかったんですけど(笑)、簡単でコードもスッキリしてるし、これのおかげで楽しくなりました(∩´∀｀)∩
今後動的に出す部分の画像のトリミングは全部こいつ一人でいいんじゃないかな。
とはいうものの、施工事例のスライダーなど、縦画像を全体で見せたい時などは、前回ご紹介した方法の高さでトリミングするやり方がオススメです。
object-fit:contain;でも出来ることはできますが、指定したサイズの中央に画像が表示されるので、画像の比率によっては、上下の余白が目立ったしまいます。
以前ご紹介した方法だと、imgをheight:100%にしてしまっているので、上下の余白はでません。
適材適所、臨機応変に使い分けましょう(/・ω・)/
それでは、また次回。
ご閲覧ありがとうございました！
