四角い画像にCSSを適用して円形にするには
ここでは四角い画像にCSSを適用して円形の画像にする方法を解説します。
ここで紹介する方法を応用すると顔写真などを円形で表示させることができます。
作成手順
-
VS2019(Visual Studio 2019 or Visual Studio 2022)を起動したら新規のWebフォーム「Article012.aspx」を作成します。
-
Webフォームのヘッダータグ内「<head>...</head>」にSTYLEタグを追加したら以下のCSSを入力します。
画像を円形にするにはCSSの「border-radius」プロパティに「50%」を設定します。
<style>
.rounded-image {
border-radius: 50%;
}
</style>
-
Webフォームのヘッダータグ内「<head>...</head>」にSCRIPTタグを追加してjQueryの最新のライブラリーを追加します。
さらに、SCRIPTタグを追加したら以下のjQueryのコードを入力します。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.slim.min.js"></script>
<script type="text/javascript">
// jQuery Document Ready Event...
$(function () {
// Toggle Rounded Image
$('input#toggleRoundedImage').click(function () {
$('img#roundedImage ').toggleClass('rounded-image');
});
});
</script>
-
<body>...</body>要素内にHTMLのlabel、checkbox, img要素を配置します。
<label><input id="toggleRoundedImage" class="w3-check" type="checkbox" />Toggle Rounded Image</label>
<br /><br />
<img id="roundedImage" src="../flower.jpg" alt="flower" width="200" />
操作手順と解説
-
サンプルが表示されたら、「Toggle Rounded Image」のチェックボックスをクリックして見てください。
-
HTMLのimg要素にCSSのクラス「rounded-image」が追加されて四角い画像が円形に変わります。
-
この状態で再度チェックボックスをクリックしてチェックを外します。
HTMLのimg要素からCSSのクラス「rounded-image」が削除されて元の四角い画像に戻ります。