일부 장치에서 반응 형 이미지가 올바르지 않음

Question

영웅 이미지를 반응 적으로 만들려고합니다. 그들은 보통 16 : 9이지만 모바일 버전에서는 브라우저가 1 : 1 비율로 만든 다른 이미지를 표시하기를 원했습니다. 그러나 일부 장치에서는 여전히 16 : 9 버전을 표시합니다. 이것은 특히 삼성 갤럭시 S6에 해당됩니다.

솔직히 말해서 솔직히 말해서 나는 앞뒤로 테스트 할 수있는 비슷한 제품이 없다.

내가 많이 빠졌음을 안다. 나는 뷰포트의 폭에 따라 이미지의 화면 비율을 변경 ..

<img src="{{ 'mainad1-image-2880.jpg' | asset_url }}" width="2880" srcset=" 
{{ 'mainad1-image-406.jpg' | asset_url }} 406w, 
{{ 'mainad1-image-608.jpg' | asset_url }} 608w, 
{{ 'mainad1-image-800.jpg' | asset_url }} 800w, 
{{ 'mainad1-image-1024.jpg' | asset_url }} 1024w, 
{{ 'mainad1-image-1050.jpg' | asset_url }} 1050w, 
{{ 'mainad1-image-1200.jpg' | asset_url }} 1200w, 
{{ 'mainad1-image-1440.jpg' | asset_url }} 1440w, 
{{ 'mainad1-image-1920.jpg' | asset_url }} 1920w, 
{{ 'mainad1-image-2880.jpg' | asset_url }} 2880w" 
sizes="(max-width: 2880px) 100vw, 2880px" 
alt="{{ settings.mainad_1_alt_text }}"/> 

Answer 1

지금 기절 반응 이미지의 아트 디렉션 사용 사례 중 하나입니다.

<picture> 구문으로 만 해결할 수 있습니다.

srcset 속성은 모든 뷰포트 너비에서 동일한 종횡비와 내용을 유지하는 이미지 만 처리합니다.