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

영웅 이미지를 반응 적으로 만들려고합니다. 그들은 보통 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 }}"/>

출처

2016-10-29 Robin

잘 모르겠지만 테스트 할 수 있습니다. [https://jsfiddle.net/tjbaezid/pdvj20u1/] 클래스와 CSS를 사용하고 CSS가 필요한 경우 너비와 높이가 필요 없습니다. 재산이 너의 편에서 일하고있다. –

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

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

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

출처

2017-03-24 13:47:47

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

답변

관련 문제