我試圖通過添加背景圖片來設(shè)計一個div。我設(shè)置了h-screen，bg-no-repeat，bg-cover，bg-center。然而，它仍然沒有保留原始圖片的清晰度。

我試過BG-不重復(fù)，BG-封面，BG-居中和h-screen。我希望它能保持原有的銳度和質(zhì)量，這就是codepen。我如何阻止bg圖像質(zhì)量下降。

#container {
  height: 100vh; 
  background-image: url('https://media.istockphoto.com/id/1162729319/photo/interior-of-a-fine-dining-indian-restaurant.jpg?b=1&s=170667a&w=0&k=20&c=puLKYH_iuK79S2_s27PhINO7rhvN9pej7gGbbH429Fg='); 
  background-size: cover; 
  background-repeat: no-repeat; 
  background-position: center; 
}

<div id='container'> hello </div>

您在代碼筆中使用的圖像的原始大小為509 x 331 px(https://media . istock photo . com/id/1162729319/photo/interior-of-a-fine-dining-Indian-restaurant . jpg？b = 1 & amps = 170667a & ampw = 0 & ampk=20。c = puLKYH _ iuk 79s 2 _ s 27 phino 7 rhvn 9 pej 7 ggbbh 429 fg =)這比它在您的代碼筆中顯示的大小要小得多。你不能放大一個小圖片——它會看起來很糟糕，或者如你所說的& quot扭曲的& quot。

簡單的解決方案:使用更大的圖像。

你使用一個不同的圖像，分辨率更高。