Wink-wink


I ran into this problem recently and found a good fix. Now when you enable people to post contents along with image urls, people may enter an image url which possibly is much larger than the available width we have in the page layout. Perhaps most of the images may become larger as we would only get around 650px of width when we are using 960px standard layout with some sort of sidebars. Seniaku may not resize image on every single page automatically but i've manage up that later with some of modification on css

So the user’s posted image in the blog post may overflow the layout. What to do then ??



1. We want to keep the image within the available width (may be 500px).
2. We also want to keep the aspect ratio intact so that the dimension doesn’t get messed up.


After googling in some pages I had to combine the CSS solution which works for most of the modern browsers (certainly not IE6).

So here’s the neat solution totally in CSS.

#post_view img {
max-width: 620px;
height: auto !important;
width: expression(this.width > 620 ? 620: true);
}


The above snippet assumes that your ID for the container (i.e DIV) is post_view. I’d discourage using class here because ID has a higher order of preference when it comes to override CSS rules.

So, all the image who exceeds the width of 620px will be automatically resized to 620px. Images below 620px will not be affected at all. The height: auto !important; will keep the aspect ratio of the image to the original ratio.

#post_view img { is a variable which you can change it with a new attribute, example.. most of a blogger post use img {  to their image.. but you can make a change depending on your template.




And this is the result after making some changes


Before
Preview from "Macam mana nak beli domain" (how to buy a domain, In Malay)



After





Compatibility:


Firefox 3
Opera 10
IE 7 (I don’t care if it works in IE 6 or not)
Chrome
Safari 4 (win) [ Don't know about Mac cuz i don't have any  ]


Ok thats All.. sekian

Pss : Beside css there some useful trick to resize and make expandable summary on every blogger post using javascipt.. but i will take it soon. Owh.. this is my first time speak in english... sorry for my bad grammar. Chill ~
recent post tengah buat..

Assalamualaikum, and Hi!
I love played with CSS and sometimes I do some Creative media stuff, I hope you enjoy this post, click like, tweet and share it with ur friends too. Don't forget to drop some comment below.
Readmore Here..

Jangan lupa vote ^ komen yang terbaik ya :D

Phewww~

like this

Terjah Top Post Minggu nie

...


Bloggers.com - Meet Millions Bloggers

Bloggers.com - Meet Millions Bloggers

PageRank

Design & Coding by : diden | 70% CSS Nak copy boleh, asal tinggalkan kredit |