CSSで画像を丸く切り抜く方法
画像を表示させる際にサイズや表示する形の変更をCSSで行いたい！
今回は四角い画像を丸切り抜いて表示させたい！
Photoshop等で画像そのものをリサイズや切り抜くこともできますが、面倒ですよね・・・やっぱり四角のままでよかった！なんてこともありそうですし。
そんな時に役立つCSSを調べました。
- border-radius
- object-fit
です！
①まずはもともとの画像を配置しただけ
②border-radius: 50% で画像を丸く
③今回はたまたま正方形の写真でしたが、そうでない場合縦横比がこのままではおかしくなってしまうので、object-fit: cover を追記
見た目は変わりませんが、横長の画像などの場合はこれできれいに表示されるはずです！
HTML
<div class="interview">
<h3>インタビュー</h3>
<p>サンプルテキスト<br>
サンプルテキスト</p>
<a class="button-black" href="#">詳しく見る</a>
<img class="three-contents" src="images/sample.jpg">
ちなみに画像だけでなくてボタンにもよく使うようです。（こんなボタン）
このCSS記述は以下のようになりました。
.button-black {
padding: 5px 10px;
font-size: 1.3rem;
color: #fff;
background-color: #000;
}
今回は
border-radius: 50px
です。
ちなみに最初さっきの画像のCSSを引きずっていて％で記述していました。
- border-radius: 10%
- border-radius: 50%
%とpx（実数）での指定の違いは「％の場合は縦横の長さに対して指定した％分丸くなるようです。
うまく説明できないので%とpx（実数）での違いについてはこちらが分かりやすかったです！
その他、今回参考にさせていただいたサイトはこちらです。
それにしてもパピーのころのラルン可愛いな・・・
