html - 丸みを帯びた画像またはボーダー半径 100%?

Question

ページ上の丸みのある要素について質問があります。たとえば、丸みを帯びていない小さなロゴがあり、丸みを帯びた背景 (120x120) に配置したいと考えています。次のようにdivを作成する方が良いですか：

border-radius: 100%;
background-color: red;
background-image: url('logo.png');
background-position: center;

または、たとえばイメージを作成するだけです。ギンプ？

Answer 1

将来、丸みを帯びた背景 (リーフレット、電子メールなど) でロゴを使用する予定がある場合は、gimp または代替でロゴのバージョンを作成する方が簡単な場合があるため、どこでも非常に迅速に使用できます。

そうでない場合は、本当に個人的な好みであり、それぞれに長所と短所があります。

境界半径ソリューション

• メディアクエリを使用したい場合は、一部の画面で背景を削除できます
• より早く達成できます。
• 背景のサイズ、色、および半径は、後の段階で簡単に変更できます。
• radius は、どのディスプレイでも高品質/解像度を維持します。

画像ソリューション

• より良いブラウザサポート。
• 将来の出版物で使用できます。

Answer 2

2 つのソリューション:

1. 画像を含む div (背景の div) に境界線の半径を持たせ、画像の幅を div の高さ 100% にします。

.background{
 border-radius: 5px;
 background-color: red;
 background-image: url('logo.png');
 background-position: center;
 width: 100px;
 height: 100px;
}

.img{
 width: 100%; 
 height: 100%;
}

1. 画像にボーダー半径をスタンドアロンとして与える

   .background{
    width: 200px;
    height: 200px;
   }
   
   .img{
    border-radius: 5px;
   }