Chromium ベースのブラウザでピクセル化された背景画像を修正するにはどうすればよいですか?

Question

Chromium ベースのブラウザでは、background-image として使用される縮小画像はピクセル化され、<img> タグ Vague を使用して表示するとさらにピクセル化して見えます。 背景画像のレンダリング スタイルを変更して、ラベルに表示されているように見せる方法はありますか? image-rendering プロパティを試しましたが、background-image では機能しないようです。 Firefoxでは綺麗に見えます。

Brave でのレンダリング例 (左側に background-image、右側に <img>) タグ:

#背景画像、画像 {
  幅: 80ピクセル;
  最小高さ: 80px;
  マージン: 10px 5px;
  表示: インラインブロック;
}

#背景画像 {
  背景リピート: リピートなし;
  背景位置: 中央;
  背景サイズ: カバー;
  背景画像: url("https://i.stack.imgur.com/X5EfB.png");
}

<div id="背景画像"></div>
<img src="https://i.stack.imgur.com/X5EfB.png" />

Answer 1

これは、size:cover ルールと position:center ルールの両方が適用された場合にのみ発生するようです。 object-fit を cover: に変更すると、

で同じ結果が得られます。

#背景画像、画像 {
  幅: 80ピクセル;
  最小高さ: 80px;
  マージン: 10px 5px;
  表示: インラインブロック;
  オブジェクトフィット: カバー;
}

#背景画像 {
  背景リピート: リピートなし;
  背景位置: 中央;
  背景サイズ: カバー;
  背景画像: url("https://i.stack.imgur.com/X5EfB.png");
}