javascript - Taobao 또는 JD.com의 사진 목록에서 사진의 원래 크기가 동일합니다. 어떻게 해야 하나요?

최근 프론트엔드 CSS에서 이미지의 너비와 높이를 조절하는 페이지를 만들었습니다. 그런데 온라인에 접속한 후 고객이 이미지 변형 문제를 신고해 왔는데, 그 이유는 다음과 같습니다. 백그라운드에 업로드된 이미지의 비율이 자체 CSS로 제어하는 ​​이미지 크기 비율과 다릅니다.
그래서 타오바오, JD.com 등 전자상거래 사이트를 찾아보니 이미지 크기나 비율이 모두 똑같더라구요

백그라운드를 통해 이미지를 업로드할 때 통일된 사양에 따라 이루어지는 건가요, 아니면 백그라운드로 이미지를 업로드할 때 크기 제한이 없고 마음대로 업로드하여 코드로 처리할 수 있는 건가요?

답글 내용:

최근 프론트엔드 CSS에서 이미지의 너비와 높이를 조절하는 페이지를 만들었습니다. 그런데 온라인에 접속한 후 고객이 이미지 변형 문제를 신고해 왔는데, 그 이유는 다음과 같습니다. 백그라운드에 업로드된 이미지의 비율이 자체 CSS로 제어하는 ​​이미지 크기 비율과 다릅니다.
그래서 타오바오, JD.com 등 전자상거래 사이트를 찾아보니 이미지 크기나 비율이 모두 똑같더라구요

백그라운드를 통해 이미지를 업로드할 때 통일된 사양에 따라 이루어지는 건가요, 아니면 백그라운드로 이미지를 업로드할 때 크기 제한이 없고 마음대로 업로드하여 코드로 처리할 수 있는 건가요?

상품을 업로드할 때 고화질 원본 이미지만 업로드하면 되며, 서버는 압축 기술을 통해 이 문제를 해결합니다.

1. 서버는 다양한 크기의 여러 세트의 사진을 저장합니다

2. img 태그를 요청할 때 주소에 식별자를 추가하면 서버가 실시간으로 이미지를 압축합니다

이 두 가지 방법 모두 구현할 수 있습니다. 후자의 경우 여러 요청이 여러 번 압축됩니다. 첫 번째 방법은 하드 디스크 소비를 늘리는 것입니다. 2가지 옵션 2에는 특성이 있으며 실제 상황에 따라 선택할 수 있습니다.
캐싱과 같은 일부 최적화 방법은 나중에 추가될 수 있습니다.

<code><img data-lazy-img="done" width="130" height="130" title="【京东超市】蒙牛 纯甄 常温酸牛奶 200g*12 礼盒装" src="//img12.360buyimg.com/n1/s130x130_jfs/t3163/260/532931768/76885/977fb56c/57b9d838Nda11d3bb.jpg"></code>

위 태그는 JD.com 홈페이지 상품 이미지 주소창에 있는 이미지 사이즈입니다. s130x130는 이미지 사이즈 표시입니다.

백그라운드에 업로드되고, 타오바오도 백그라운드에 업로드됩니다

이는 프로그램만으로는 완전히 처리할 수 없으며, 운영자에게 해당 요구 사항을 제시해야 합니다.

모든 문제를 프로그램에 의존하려는 것은 전원이 완전히 꺼진 컴퓨터가 자체 전원을 찾아 시작하도록 하는 것과 같습니다.

먼저 타오바오의 배경 이미지 업로드 프로세스를 시도해야 합니다. 타오바오의 이미지 업로드는 실제로 업로드 플러그인을 사용하여 모든 이미지를 자르고 압축할 수 있으며 자동으로 변환됩니다. 타오바오의 비율 형식.

질문에 대해서는 더 나은 이미지 업로드 플러그인을 찾고, 이미지 업로드 시 비율을 조절하고, 소스에서 이미지 품질을 조절하는 것이 좋습니다.
동시에 업로드 작업 프로세스와 팁을 최적화하세요. 눈에 띄는 프롬프트를 사용하여 사용자에게 몇 가지 요구 사항을 알립니다.

무료 이미지 업로드 및 자르기 플러그인을 추천합니다: http://www.w3cschool.cn/jquer...
이와 유사한 업로드 플러그인이 더 적합할 것입니다. 물론 일괄 업로드하는 경우 일괄 차단을 구현하는 이미지 차단 스크립트를 찾을 수 있습니다.
그러나 개인적으로 전자상거래와 유사한 이미지의 경우 PS와 같은 도구의 이미지 처리 단계에서 크기 비율을 처리하는 것이 더 적절할 것이라고 제안합니다. 귀하의 웹사이트에 대한 이미지 비율 요구 사항을 당사에 보내실 수 있습니다. 또한 귀하의 이미지 비율은 Taobao와 같은 대형 플랫폼의 비율에 최대한 가까워지는 것이 좋습니다. 이렇게 하면 고객 자료 이미지의 재사용이 용이해지고 사용자 경험이 향상됩니다. .