I have a simple html + css page that has 3 images on it. I am trying to resize the page depending on the size of the browser window. Right now, I have 3 images in a div that is set to height as a percentage of the surrounding containers, and the images are set to height: 100% and width: auto. now this works great if you resize the entire window, but if you just change the width, they will not change, of course, since the height has not changed, and they end up on a page that is really ugly.
my first question is: is there a good way to resize images regardless of whether you change the height or width of the browser using only html / css? If not, should jquery be used, and if so, can you tell me a good resource?
Second question: if this is not possible, how can I at least stop them from running along the line? I tried to make the overflow hidden or scrolled, but they still stumbled, and then either cut off, you need to scroll vertically.
Here's a link to a live page: http://carissalyn.com/Landing.html (yes, I understand that the images load slowly, I compress them before they live) Let me know if you need other information.
Here's the corresponding css (the img container is inside the fadingtext, which is inside the body):
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; }
And here is the corresponding html to clarify that there are 3 images:
<div id="fading_text"> <div id="imgcontainer"> <a href="" class="imghover"><img src="images/leaf.jpg" alt="portrait" class="border"></a> <a href="" class="imghover"><img src="images/DSC_2280-Edit-Edit-Final.jpg" alt="portrait" class="border"></a> <a href="" class="imghover"><img src="images/DSC_2685.jpg" alt="blog" class="border"> </a> </div> </div>