Resizing Images preserving Aspect Ratio

by XTREME104

HTML

Not Hardware Accelerated:<div id="wrapper">
<img class="menuimg" src="http://buildinternet.com/live/elasticthumbs/officeal.jpg"/>
<img class="menuimg" src="http://buildinternet.com/live/elasticthumbs/officeal.jpg"/>
<img class="menuimg" src="http://www.rochesterastronomy.org/snimages/reference/n598.jpg"/>
<img class="menuimg" src="http://www.gemini.edu/images/stories/press_release/pr2005-12/fig1.jpg"/>
</div>

Hardware Accelerated:<div id="wrapper" class="accelerated">
<img class="menuimg" src="http://buildinternet.com/live/elasticthumbs/officeal.jpg"/>
<img class="menuimg" src="http://buildinternet.com/live/elasticthumbs/officeal.jpg"/>
<img class="menuimg" src="http://www.rochesterastronomy.org/snimages/reference/n598.jpg"/>
<img class="menuimg" src="http://www.gemini.edu/images/stories/press_release/pr2005-12/fig1.jpg"/>
</div>
<p>CSS:<br/>
#wrapper > img {
    -webkit-transition: 300ms;
    -moz-transition: 300ms;
    -ms-transition: 300ms;
    max-height: 35px;
    max-width: 35px;
}

#wrapper > img:hover {
    -webkit-transition: 300ms;
    -moz-transition: 300ms;
    -ms-transition: 300ms;
    max-height: 50px;
    max-width: 50px;
}

#wrapper.accelerated > img  {
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
}

#wrapper.accelerated > img:hover  {
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    }</p>

CSS

#wrapper > img {
    -webkit-transition: 300ms;
    -moz-transition: 300ms;
    -ms-transition: 300ms;
    max-height: 50px;
    max-width: 50px;
}

#wrapper > img:hover {
    -webkit-transition: 300ms;
    -moz-transition: 300ms;
    -ms-transition: 300ms;
    max-height: 100px;
    max-width: 100px;
}

#wrapper.accelerated > img  {
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
}

#wrapper.accelerated > img:hover  {
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
}