Изменение img в зависимости от размера окна

Question

Я хочу, чтобы мой сайт VS2015 отображал более горизонтальное изображение, созданное мной на настольном компьютере, и более вертикальное изображение на мобильном устройстве. У меня есть два отдельных обрезанных изображения, чтобы избежать искажения размеров. Я пытался использовать css с медиа-запросами, чтобы скрыть или показать, но он всегда показывал оба изображения (другие медиа-запросы для изменения размера на странице работают нормально). Я попробовал тег изображения:

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

и скачал картинку, заполнил и добавил это в шапку

Все еще безуспешно. Извините за вопрос новичка, но я бы хотел помочь с тем, что кажется простой идеей.

Greg

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>