창 크기를 기반으로 img 변경

Question

바탕 화면에서 더 많은 가로 이미지를 표시하고 휴대 기기에서 더 수직 이미지를 표시하도록하고 싶습니다. 크기 조정의 왜곡을 피하기 위해 두 개의 분리 된 자른 이미지가 있습니다. 미디어 쿼리와 함께 css를 사용하여 숨기거나 표시하려했지만 항상 두 이미지 (페이지의 크기 조정을위한 다른 미디어 쿼리가 잘 작동 함)를 보여주었습니다. 나는 사진 태그를 시도 :

<picture> 
    <source srcset="../Images/Chalkboard414.jpg" media="(max-width: 450px)"> 
    <source srcset="../Images/Chalkboard900.jpg"> 
    <img srcset="../Images/Chalkboard900.jpg>" 
</picture> 

및 다운로드 그림 채우기를하고 여전히 성공을

헤더없는이 추가되었습니다. 초보자를위한 질문에 대해 유감스럽게 생각하지만 간단한 생각처럼 보이는 것에 도움이 될 것입니다.

그렉

Answer 1

내가 다른 무슨 짓을했는지 알고 .....하지만 지금은 코드가 완벽하게 작동하지 마십시오. 방금 도움을 기다리는 동안 프로젝트의 일부 추가 부분을 추가하기 시작했습니다 ... 이제는 훌륭하게 작동합니다.

<div style="width:80%; margin-left:10%"> 
<div style="position:relative"> 
<picture> 
    <source srcset="../Images/Chalkboard414.jpg" media="(max-width: 450px)"> 
    <source srcset="../Images/Chalkboard900.jpg"> 
    <img style="width:100%" srcset="../Images/Chalkboard900.jpg"/> 
</picture> 
    <img style="position:absolute; width:80%; top:10%;left:20px" src="../Images/chalkcarpaltunnel.png" /> 
    <img style="position:absolute; width:80%; top:20%;left:20px" src="../Images/chalktriggerfinger.png" /> 
    <img style="position:absolute; width:80%; top:30%;left:20px" src="../Images/chalkfractures.png" /> 
    <img style="position:absolute; width:80%; top:40%;left:20px" src="../Images/chalkdupuytrens.png" /> 
    <img style="position:absolute; width:80%; top:50%;left:20px" src="../Images/chalkganglions.png" /> 
</div> 
</div>