親要素の幅をはみ出して、画像をレスポンシブ対応の画面の横幅画像一杯に&トリミングもする方法
WEBデザイン関係の備忘録です。親要素の幅をはみ出して、画像をレスポンシブ対応の画面の横幅画像いっぱい固定、かつ縦幅は固定で画像を縦中央トリミングする方法。何を言ってるんでしょうね？？とにかく↓こんな感じのがしたかったややこしいですが、できそうでできなくて、いじりまくってたらいつの間にかできたので取り急ぎメモ。position:absoluteを使っていないから、あとの要素も重ならずに下に続けられるので、使い勝手がいい。wordpressの投稿画面でこういうの欲しかったから苦労した。固定ページなどのインパクトのある見出しとかに使えそう。(html)<body><div>←幅の指定がある親要素<div class="vwmax"><img src="xxxx.jpg" /></div></div></body>(css)body{ overflow-x: hidden;}/* 横幅画面いっぱい */.vwmax { height:250px; width:auto; margin: 0 -500%; padding: 0; overflow:hidden;}.vwmax img{ width:100vw; height:auto; position: relative; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}参考サイト：https://deerest.co/2015/10/22/css3-img-center-trimming/.vwmaxのheightが画像表示領域。適宜変更。.vwmax img のheightを100%とかにしてwidthをautoに変えたりして画像の横幅をトリミングすることもできる。メディアクエリで指定して、デバイスに応じた画像表示領域を変更していけばレスポンシブに対応できます。他にもやり方あるのかもしれないけど検索してもぴったりこれっていうのが無かった。記述だけで解説もなしですが、暇があれば追記します。※2017.4.4 追記スマホ環境で、bodyのoverflow-xが効かない?ことを発見。横にスライドすると.vwmax で指定した横幅分表示できてしまっていた。ちなみになぜか下方向にも普通よりはみ出してスライドできてしまった。とりあえず、cssにhtml{ overflow-x:hidden;}を追記して修正。
