title: How to dynamically resize image in css?
body: <p>I have a simple html + css page that has 3 images on it. I'm trying to make the page resize depending on the size of the browser window. Right now, I have the 3 images in a div that is set to a height as a percentage of the surrounding containers, and the images are set to height:100% and width:auto. now, that works fine if you resize the entire window- but if you only change the width, they won't resize of course since the height didn't change, and they end up getting pushed down the page which is really ugly.</p>
  
  <p>my first question: is there a good way to make the images resize no matter if you change the height OR width of the browser using just html/css? If not, should I be using jquery and if so can you point me to a good resource?</p>
  
  <p>Second question: if it's not possible, how do I at least stop them from getting bumped down a line? I tried making the overflow hidden or scrolled, but they still get bumped, then either cut off your you have to scroll vertically. </p>
  
  <p>Here's a link to the live page: <a href="http://carissalyn.com/Landing.html" rel="nofollow">http://carissalyn.com/Landing.html</a> (yes I realize the images load slowly I'll compress them before it's live). Let me know if you need any other info. </p>
  
  <p>Here's the relevant css (img container is inside fadingtext which is inside body):</p>
  
  <pre><code>body,html{
  height:100%;
  margin:0; padding:0;
  }
  
  #imgcontainer{
  height: 100%;
  width: 90%;
  display: inline-block;
  }
  
  img { 
  max-height:90%; 
  width: auto;
  }
  
  #fading_text {
  text-align: center;
  height: 60%;
  -webkit-animation: fade-text 20s 1;
  -moz-animation: fade-text 20s 1;
  }
  </code></pre>
  
  <p>And here's the relevant html to clarify that there are 3 images:</p>
  
  <pre><code>&lt;div id="fading_text"&gt;
  &lt;div id="imgcontainer"&gt;
  
  &lt;a href="" class="imghover"&gt;&lt;img src="images/leaf.jpg" alt="portrait" class="border"&gt;&lt;/a&gt;
  &lt;a href="" class="imghover"&gt;&lt;img src="images/DSC_2280-Edit-Edit-Final.jpg"  alt="portrait" class="border"&gt;&lt;/a&gt;
  &lt;a href="" class="imghover"&gt;&lt;img src="images/DSC_2685.jpg" alt="blog" class="border"&gt;  &lt;/a&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>