jQuery Forum

Hello Everyone,
I am not sure what is wrong with this code but I would like to know so that I can continue to learn. What I am trying to do is to change the <img> tag attributes using jQuery when the css stylesheets change at break points with media queries. So the css sheet changes and at the same time I wast jQuery to change the <img> tag attributes. Here is the jQuery code:

The starting size of .content is 467 but when the stylesheet changes at a media query break point the new size of .content is 267. I just want jQuery to change the <img> attributes when .content is <268 In effect both .content and <img> will change at the same time. I hope this makes sense.

1.       $(document).ready(function(){

         var h=$(".content").height();

         if(h<268){

         $("#pictureOne").prop("src","medium.jpg").width(400).height(267);

               }

               });

1. <div class="content">

             <img id="pictureOne" src="large.jpg" width="700" height="467">

    </div>

And this is the contents of the media query:
Note that this is inside an external css sheet.

1. .content {position: relative; margin: 0px auto; width: 400px; height: 267px; border: 1px solid black;}