CSS HTML <picture> <source> 태그에서 media 사용했는데도 이미지가 똑같을 때

 

어이없게도 분명히 코드를 맞게 적었는데! 예제랑 똑같이 작성을 했는데!도 불구하고 <img>태그에선 작동하는 이미지가 <source> 태그에서 media랑 같이 쓰니 작동하지 않아 너무 답답했는데요 그 이유를 발견했습니다.

img 태그와 source 태그의 위치가 바뀌어서 그렇습니다.....;;;

혹시 img 태그를 Picture 태그의 마지막 자식에 배치했음에도 이미지가 나오시지 않는 분들은 source 태그가 여러개라면 min-width을 오름차순으로 배치해보세요! 

 

<source srcset="./햄스터.jpeg" media="(min-width: 800px)" >

<source srcset="./햄스터.jpeg" media="(min-width: 1000px)" >

<img >

 

이런식으로요

 

도움이 되었으면 좋겠습니다.