흐릿한 이미지로 카탈로그보기

Question

최근에 전자 상거래 사이트를 만들고 800x800 크기의 제품 이미지를 업로드했습니다.이 카탈로그는보기가 흐릿하지만 단일 제품에서는 선명합니다.

테마 표시 카탈로그 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/