コンテンツ5 サムネイル 1×1

contents-5-3840x3840

注目
人気です
セール中
割引中

circle(正円) 1:1画像

元画像が1:1のアスペクト比であれば、正円の呪文「border-radius:999.9rem;」をとなえるだけ

1x1画像

circle(正円) 4:3画像

元画像が4:3のアスペクト比であれば、正円の呪文(border-radius:999.9rem;)ではhalf-circle-side、左右半円になるだけ
しかも画像はレスポンシブなので、サイズ決め打ちもできない
さぁ どうする?

4x3画像

circle(正円) 16:9画像

元画像が16:9のアスペクト比も、画像を歪めず中央部分を残して周りをトリミングするのは難儀の極み
解決策は「aspect-ratio: 1 / 1;」と「object-fit:cover;」および「width:100%;」

16x9画像

 

アバター

author-primary による

Algorism Inc. 株式会社アルゴリズム 代表取締役。SEO塾運営。このサイトは2023年新発売のWordPressテーマのショーケース