CODEWITHSUNDEEP
htmlimagevisual-studio-2015picturefill
Greg W
Greg W

Reputation: 91

Changing img based on window size

I wish to have my VS2015 site display a more horizontal image I have created when on a desktop and a more vertical one on a mobile device. I have two separate cropped images to avoid distortion of sizing. I have tried using css with media queries to hide or show but it always showed both images (other media queries for resizing on the page work fine). I have tried the picture tag:

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

and downloaded picture fill and added this to header

Still no success. Sorry for the newbie question but I would love some help with what seems like a simple idea.

Greg

Upvotes: 0

Views: 67

Answers (1)

Greg W
Greg W

Reputation: 91

Don't know what I did different..... but now the code works perfect. I just started adding some additional parts of the project in while awaited for help... and it now works great.

<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>

Upvotes: 0

Related Questions