이미지 요소를 선택하지 파일이

내가 표시해야합니다 간단한 그림 요소를 가지고 있어야 브라우저 창 크기에 따라 두 개의 사진 중 하나를이미지 요소를 선택하지 파일이

<picture> 
    <source src="images/still_life-650_medium_2x.jpg" media="max-width:899px" type="image/jpeg"> 
    <source src="images/still_life-1600_large_2x.jpg" media="min-width:900px" type="image/jpeg"> 
    <img src="images/still_life-1600_large_2x.jpg" alt="Old calculator and some fruit"> 
    </picture>

을 그러나 내가 899px 이하 크기의 브라우저와 함께 테스트 할 때, 아무리 작은 크기로 만들었더라도 항상 "images/still_life-1600_large_2x.jpg"파일을로드합니다 (Chrome devtools를 사용하여 이미지가 동일하게 표시 될 때 어떤 파일이로드되는지 확인합니다).

위의 코드에 문제가 있습니까?

출처

2016-06-07 Steve Medley

당신이 이런 식으로 일을 시도했다 :'srcset = "..."미디어 = "(최대 폭 : 899px)"'- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture – Deryck

@Deryck 그랬어! srcset와 max-width 주변의(). 고맙습니다. –

도움을 주시면 기쁘게 생각합니다. – Deryck

Deryck 그의 의견에 답변했습니다.

<picture> 
    <source srcset="images/still_life-650_medium_2x.jpg" media="(max-width:899px)" type="image/jpeg"> 
    <source srcset="images/still_life-1600_large_2x.jpg" media="(min-width:900px)" type="image/jpeg"> 
    <img src="images/still_life-1600_large_2x.jpg" alt="Old calculator and some fruit"> 
    </picture>

출처

2016-06-07 06:50:49

이미지 요소를 선택하지 파일이

답변

관련 문제