イメージを丸く表示する
サイト上で唯一のimg要素を丸く表示するように変更しました。
もちろん商品アイテム画像以外でですが。
このイメージはそもそもfavicon.icoと共通で、pngファイルで書き出したものです。
もともと正方形で表示原寸 32 x 32 pxなので、表示画像を丸くするのは、css1行だけです。
border-radius: 50%;ネット記事では、あたかもobject-fitプロパティが画像を切り抜くかのような表現もありましたが、object-fitプロパティは画像の切り抜きはしません。
あくまでimg要素の表示領域にどのようにはめ込むかを指定するプロパティです。
切り抜き、別の言葉ですとトリミングと書かれていたりもしていましたが、そうした効果と同じに見える場合があるだけです。
丸く表示する場合ですと、丸くしているのは、border-radiusプロパティの効果の影響です。
HTMLやCSSを学習している方も多いかと思いますが、検索に上位ヒットしてくるサイトを見る前に、HTMLやCSS、Web関連ならmdnのサイトを先に見ておくほうがより理解が深まります。おすすめです。
そもそもobject-fitとfitが使われてもいますし、効果の内容もtrimよりはfitかなと。
ただ実際の使用を想定した場合、イメージを切り抜いて・・・て感じになりますか、、、
それともサーチエンジン向きの量産記事ばかりってことですかね。。。
この記事が気に入ったらサポートをしてみませんか？