ぼやけ画像カタログビュー

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/