Monday, August 2, 2010

Scaling Images using Max-Width and Expression (for IE)

Sometimes you'll find yourself needing to scale images on your sites. Most recently I was working on a CMS and I knew the customer would be uploading images, so I needed a good way to scale images and keep them to a max width. Fortunately, this is easy enough with a little CSS:

<style type="text/css">
#mydiv img
width:expression(this.width > 320 ? "320px" : this.width);


<div id="mydiv">
<img src="" />


In order to make this cross browser (FF & IE), we need to use max-width and an expression for the width. Try it out here:


No comments:

Post a Comment