CSS Hack max width like image resize


Recently I was fixing some CSS image alignments and the width for images. And the problem was with the big images that come out of content?! At this point comes out max-width. The max-width CSS property is a great property to use when you don’t want an element to get larger than a certain size. It does exactly what it says it does. Using it with images can be very handy. Here’s the syntax.

selector {max-width:value;}

so an example will be:

 .post img {max-width:410px;}

For those with fluid designs you could also do:

.post img {max-width:85%;}

but sometimes there are problems with IE, and for this here is the solution:

selector {width: expression(this.width > value ? value: true);}

A real example in this all cases will be:

.post img { max-width:410px; width: expression(this.width > 410 ? 410: true); }

Please notice I speak about images max-width, but you can apply to every CSS tag that you want; sidebar, post width, header, etc

Share your love


Leave a Reply

Your email address will not be published. Required fields are marked *