Change <img> tag using .prop

Change <img> tag using .prop

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