目錄視圖中的模糊圖像

Question

我最近創建了一個電子商務網站並上傳了全部爲800 x 800的產品圖像。問題出現在產品目錄視圖中，它們看起來很模糊，但在單一產品上它們又好又脆。

在290 X 290的主題目錄顯示圖像和默認的CSS是：

@media (min-width: 768px) { 
.product-item .wrap-img img { 
    width: 100%; 
    height: 100%; 
} 
} 

我該如何解決這個問題？我是否需要調整圖像大小，使用某種CSS，還有其他的東西？

感謝

Answer 1

你上傳的圖片比主題展示區域，這反過來又使瀏覽器縮小您的形象和「猜」怎麼會看在一個較小的尺寸。這有時會導致不太令人滿意的渲染（就像你的情況一樣）。

爲了解決這個問題，你既可以：

1）調整圖片的大小正好/周圍提供的圖像區域大小（290x290），所以瀏覽器沒有規模和重新採樣圖像。

2）您可以通過瀏覽器使用的圖像渲染風格改變自己的喜好之一：

.product-item .wrap-img img { 
    image-rendering: auto; 
    image-rendering: crisp-edges; 
    image-rendering: pixelated; 
} 

在這裏看到一個更全面的解釋：

https://css-tricks.com/almanac/properties/i/image-rendering/