[CSS]レスポンシブ用に画像を縮小するだけではなく、クロップにも対応させるテクニック

中心箇所を選定 画像は天地左右にクロップ可能なので、中心となる箇所をグリッドから決定します。 HTML HTMLは画像を配置するimg要素の他に、クロップするためにdiv要素が二つ必要です。 <div class="focal-point"> <div><img src="guy.jpg" alt="guy"></div> </div> div要素を余計に使用することはよくないことですが、実装を簡単にするために使用しています。 クロップする箇所を指定するには、classを追加します。 <div class="focal-point right-3 up-3"> <div><img src="guy.jpg" alt=""></div> </div> 右3、上3は、上記のグリッドから算出してもので、右3上3にクロップします。 CSS まずは、ベースとなるスタイルシートです。 * { marg

[tenchikometen]

“[CSS]レスポンシブ用に画像を縮小するだけではなく、クロップにも対応させるテクニック”

[kool_kreate]

クロップ：画像中身のピックアップもしとくと親切そう

[warriorking]

(CSS)レスポンシブ用に画像を縮小するだけではなく、クロップにも対応させるテクニック | コリス

[fujitta358]

確かに、クロップしたほうがいいよね。

[burnworks]

普通にclipプロパティ使えばいいと思うんですがなぜにmargin

[xinx]

この手があったか！

[mifio]

クロップ。覚えておこう。

[extra_number]

そんなに使う場面なさそうだけども、クロップ試してみたい。

[Donca]

✔ [CSS]レスポンシブ用に画像を縮小するだけではなく、クロップにも対応させるテクニック