Изменение 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> 

и загруженную заливку изображения и добавил это не заголовок

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

Грег

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>