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

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

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

и скачал картинку заливки и добавил Это в заголовок

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

Грэг

1 ответ

  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>