title: IE9 responsive image resize issue with pure CSS3 media query
body: <p>I try to set responsive layout design.</p>
  
  <p>My issue is: while in 1024*768 screen resolution, checked viewport without scrollbar width is 1007. I set my media query in CSS3 for 1007px viewport to <code>@media screen and (max-width: 1007px)</code></p>
  
  <p>It works fine in Chrome.</p>
  
  <p>However it doesn't work in IE9. Until  <code>@media screen and (max-width: 1024px)</code> IE9 doesn't work correctly.</p>
  
  <p>Since real viewport width without scrollbar is 1007px, I have to make IE9 (and IE7 &amp; IE8 if possible) working in a proper way with 1007px. </p>
  
  <p>Related images are below for Chrome and IE9. As you see in IE9, my image's right side is cropped. In Chrome whole image is displayed as expected.</p>
  
  <p>I also use <em>modernizr-1.7.min.js</em> which it says that <em>A JavaScript library to make MSIE behave like a standards-compliant browser.</em> </p>
  
  <p><strong>MY CSS</strong></p>
  
  <pre><code>    /* html5doctor.com Reset Stylesheet v1.5 Last Updated: 2010-08-12 Author: Richard Clark - http://richclarkdesign.com */
  html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{border:0;outline:0;vertical-align:baseline;background:transparent;margin:0;padding:0;}body{line-height:1;}article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block;}nav ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:none;}a{font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0;}ins{background-color:#ff9;color:#000;text-decoration:none;}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:700;}del{text-decoration:line-through;}abbr[title],dfn[title]{border-bottom:1px dotted #000;cursor:help;}table{border-collapse:collapse;border-spacing:0;}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0;}input,select{vertical-align:middle;}
  
  #page{
      max-width:1280px;
  
      overflow-y:scroll;
  
  
  }
  
  #wrapper-header, #wrapper-content, #wrapper-footer, #wrapper-nav {
      width: 100%; overflow: hidden;margin:0 auto;
  }
  
  @media screen and (max-width: 1007px) {
  
      #logoimg {
        width: inherit;  /* This makes the next two lines work in IE8. */
        max-width: 100%  /* Add !important if needed. */
        height: auto;    /* Add !important if needed. */
          }
      }
  </code></pre>
  
  <p><strong>MY HTML</strong> </p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;  
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Lorem Ipsum&lt;/title&gt;
      &lt;meta name="viewport"  content="initial-scale=1, width=device-width"&gt;
      &lt;script src="js/modernizr-1.7.min.js"&gt;&lt;/script&gt;&lt;!-- this is the javascript allowing html5 to run in older browsers --&gt;
      &lt;script src="js/IE9.js"&gt;&lt;/script&gt;&lt;!-- A JavaScript library to make MSIE behave like a standards-compliant browser. --&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/css.css" media="screen" /&gt;
  &lt;/head&gt;
  &lt;body id="page"&gt;
      &lt;div id="wrapper-nav"&gt;
  
      &lt;/div&gt;&lt;!-- navigation wrapper--&gt;
      &lt;div id="wrapper-header"&gt;&lt;img id="logoimg" src="img/logo.jpg" alt="" /&gt;&lt;/div&gt;&lt;!-- header wrapper--&gt;
      &lt;div id="wrapper-content"&gt;b&lt;/div&gt;&lt;!-- content wrapper --&gt;
      &lt;div id="wrapper-footer"&gt;
  
          &lt;script type="text/javascript"&gt;     
              var viewportHeight;
              var viewportWidth;
              if (document.compatMode === 'BackCompat') {
                  viewportHeight = document.body.clientHeight;
                  viewportWidth = document.body.clientWidth;
              } else {
                  viewportHeight = document.documentElement.clientHeight;
                  viewportWidth = document.documentElement.clientWidth;
              }
              document.write('&lt;p&gt;Your viewport width without scrollbars is '+viewportWidth+'x'+viewportHeight+'&lt;/p&gt;');
          &lt;/script&gt;
          &lt;p&gt;Lorem Ipsum&lt;/p&gt;
  
  
      &lt;/div&gt;&lt;!-- footer wrapper --&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>IE9</p>
  
  <p><img src="https://i.stack.imgur.com/MLcDL.jpg" alt="enter image description here"></p>
  
  <p>CHROME</p>
  
  <p><img src="https://i.stack.imgur.com/Tb2Yl.jpg" alt="enter image description here"></p>