CSSで画像を丸く切り抜く方法

画像を表示させる際にサイズや表示する形の変更をCSSで行いたい!

今回は四角い画像を丸切り抜いて表示させたい!

Photoshop等で画像そのものをリサイズや切り抜くこともできますが、面倒ですよね・・・やっぱり四角のままでよかった!なんてこともありそうですし。

そんな時に役立つCSSを調べました。

です!

①まずはもともとの画像を配置しただけ

f:id:lalune_webdedign:20210101132421p:plain

②border-radius: 50% で画像を丸く

f:id:lalune_webdedign:20210101132536p:plain

③今回はたまたま正方形の写真でしたが、そうでない場合縦横比がこのままではおかしくなってしまうので、object-fit: cover を追記

f:id:lalune_webdedign:20210101132651p:plain

見た目は変わりませんが、横長の画像などの場合はこれできれいに表示されるはずです!

HTML

        <div class=“interview”>
            <h3>インタビュー</h3>
            <p>サンプルテキスト<br>
                サンプルテキスト</p>
            <a class=“button-black” href=“#”>詳しく見る</a>
            <img class=“three-contents” src=“images/sample.jpg”>

CSS

.three-contents {
    border-radius50%;
    object-fitcover;
}

ちなみに画像だけでなくてボタンにもよく使うようです。(こんなボタン)

f:id:lalune_webdedign:20210101134931p:plain

このCSS記述は以下のようになりました。

.button-black {
    padding5px 10px;
    font-size1.3rem;
    color#fff;
    background-color#000;
    border-radius50px;
}

今回は

border-radius: 50px

です。

ちなみに最初さっきの画像のCSSを引きずっていて%で記述していました。

f:id:lalune_webdedign:20210101135232p:plain

f:id:lalune_webdedign:20210101135332p:plain

%とpx(実数)での指定の違いは「%の場合は縦横の長さに対して指定した%分丸くなるようです。

うまく説明できないので%とpx(実数)での違いについてはこちらが分かりやすかったです!

coliss.com

その他、今回参考にさせていただいたサイトはこちらです。

blog.ver001.com

note.com

それにしてもパピーのころのラルン可愛いな・・・

コメント

タイトルとURLをコピーしました