シェアする

  • このエントリーをはてなブックマークに追加

CSSを使用して四角い画像を円形にするカスタマイズ方法!

シェアする

  • このエントリーをはてなブックマークに追加
  • 18


どうも、ジョニー@creatorcheck)です。

CSSを使用して四角い画像を円形にするカスタマイズ方法のご紹介です。

使用するHTML

<img class="circular--square" src="woman.png" />
<img class="circular--landscape" src="woman.png" />
<img class="circular--portrait" src="woman.png" />

使用するCSS

.circular--square {
  border-radius: 50%;
}

.circular--landscape {
  display: inline-block;
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 50%;
}

.circular--landscape img {
  width: auto;
  height: 100%;
  margin-left: -50px;
}

.circular--portrait {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 50%;
}

.circular--portrait img {
  width: 100%;
  height: auto;
}
色々いじってみてね!johnny-c

まとめ(感想)

とっても簡単に四角画像が円形画像になりましたね。ちょっとしたことでサイトの見栄えって変わりますからね〜難しいです。

johnny-tubuyaki

あなたも私も独学.. いいじゃないの〜。
CSSを使用して四角い画像を円形にするカスタマイズ方法!
この記事をお届けした
クリエイターチェックの最新ニュース情報を、
いいねしてチェックしよう!

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク