추천 게시물에서 이미지가 축소되고 왜곡됩니다

안녕하세요, 여러분!

우리는 여러 개의 추천 게시물을 가지고 있는데,那里的 이미지들이 다소 보기 흉합니다:

품질 손실 없이 이미지 크기를 조정하는 방법이 있을까요?

혹시 모르니 우리 포럼 주소를 공유합니다: https://community.elfsight.com/

감사합니다!

그것은 Featured Cards 컴포넌트에서 온 건가요? 그렇다면 @manuel 님이 도와줄 수 있을지도 모르겠네요.

네, 그 컴포넌트처럼 보입니다. 다만 Featured Tiles 컴포넌트를 기반으로 하고 있으며, 이미지 리사이즈 관련해서는 코드를 변경하지 않았다고 생각합니다. Topic List Thumbnails 컴포넌트에서도 가끔 흐릿한 미리보기가 보였습니다. @david 님이 미리보기가 흐려지지 않도록 이미지를 최적화하는 방법에 대해 조언해 주실 수 있을까요?

여기서 크기 정의를 업데이트해야 합니다:

그리고 계산하여 여기 필요한 해상도 목록을 업데이트해야 합니다:

아.. 지적해 주셔서 감사합니다! 설정에서 사용자가 크기를 조정할 수 있도록 했습니다:

이 유연성을 기존 정의와 어떻게 통합할지, 혹은 통합할 수 있을지 좀 더 생각해 봐야 할 것 같습니다 :robot:

가장 쉬운 방법은 아마도 코드에서 가장 합리적인 최대 크기(예: 500x500, 그리고 1.5배와 2배 변형)의 컴포넌트를 정의한 후, 표시할 때 브라우저가 크기를 축소하도록 하는 것일 것입니다.

힌트 감사합니다, 데이비드! 컴포넌트 측면에서는 꽤 직관적으로 보입니다. 어쨌든 브라우저가 실제로 어떻게 동작하는지, 즉 스케일된 섬네일을 선택하고 최종 레이아웃 크기로 리사이즈하는 과정에 대해 조금 더 잘 이해해야 할 것 같습니다. 앞서 언급했듯이, 주제 목록의 섬네일에서도 흐릿한 이미지를 확인했고, 브라우저에 따라 결과가 약간씩 달랐습니다. 아마도 제 테마 코드에서 크기를 조정하는 작업을 하고 있기 때문일 것입니다.