#css
スタイルだけで画像を任意の縦横比率でトリミングまたは画像が全て収まるようにし、且つ比率を保ったままレスポンシブな表示にする方法ってありますか？（画像はダイナミックでNxNな比率がくる前提）
https://www.tam-tam.co.jp/tipsnote/html_css/post10099.html
これが近いんですが、比率を保ったままレスポンシブができなかったと思うので、わたしは毎回例えば４：３の比率で画像を扱いたい場合は4x3ピクセルの、正方形なら1x1pxの透明giとかを作って、
<div class="img" style="background-img:url('hoge');"><img src="1x1.gif"></div>
として、
.img{
width: 100px;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.img img{
display: block;
width: 100%;
}
みたいにします。
トリミングまたは全て収まるようにはdiv.imgのbackground-positionをcover、containで切り替えます。
これだと、見た目が任意の比率を保ったままレスポンシブにできますが、altが書けないとか、今時透明gifなんてどうなのとも思うし、やっぱスタイルだけでできないかなと思ったんですが、みなさんどうしてますか？jsでデバイス幅に応じてトリミングする高さを、、とかしたほうがいいのでしょうか。
一緒に読まれている質問
4 件の回答
IE無視か、IE別対策前提であれば、object-fitで解決だね。
object-fit使わないのであれば、親要素beforeにpadding-topでできるかな。
あと、目的によっては、mediaqueryで対応できることも多いので、完全無欠に縦横比を守る必要もなかったりする。たとえば、ウィンドウ縦横比が一定以下の場合でかき分けるとかで対応できる場合も多いよ。
＠media (min-aspect-ratio: 1920/1200) {
width: 100%;
height: auto;
}
chomeが利かなかった記憶で、一切やってないがいまはＯＫなんだろうか。
object-fit:coverで、IE、EdgeはPolifilで対応するのが手っ取り早いと思う
backgroundで画像を表示するものをベースとして、heightではなくpadding-bottom(もしくはpadding-top)でやれば比率は一定にできるよ。
padding-bottomで%を指定したら横幅に対する%で出る。だからpadding-bottom100%はwidth100%と同じになる。そこでpadding-bottom75%とかにすれば横：縦=４：３にできる。
それをベースにbackgroundで画像を敷いて、paddingをしているdivにtitle属性を使ってSEO的部分を少しフォローとかするのはあり。
でも文字等が含まれてる画像ならこういったことはしない方がいいよ。