-
Find My Tradesman - More details->Theme Redesign Bespoke Wordpress Development Geolocation functionality Bespoke Logo
-
The Animal Farm - More details->Web Design Wordpress Development Theme Options Bespoke Widgets
-
Esteban Music - More details->Web Design Wordpress Development Social Network Integration Data Capture Facebook Widget
The Navy Training Corps - More details->Web Design Wordpress Development Online Shop Unit Locator Admin Section
Lisa Charrington-Wilden - More details->Web Design Wordpress Development Bespoke "Custom Fields" Functionality Javascript Photo Gallery
Blog Friends - More details->Web Design Wordpress Multi User External Blog Aggregation Social Networking Functionality
Easily ensure images don’t overflow your content area
Just a quick one!
Have you had the problem of images overflowing your main content area?
I have had this issue and it is particularly problematic with fluid layouts like this one.
The answer is simple-
img {max-width:100%;}
Well…. nothings that simple……
Because of padding and margins etc my images, although smaller, still overflowed slightly… So I had to change the css to
img {max-width:91%;}
Of course once I had put this in my style.css every single image was no bigger than 91%….. no good.
I only wanted to target images within my main content area, the dynamic bit. My main content area div is called “#pagecontent70″ (its at 70% width..) so my final alteration to the css turns it in to this-
#pagecontent70 img {max-width:91%;}
Beautiful.
Or is it? The savvy among you will know that this will not proportionaltly resize the image….. again… no good.
Simply over come this with a little height:auto malarkey.
So our absolute final (promise) alteration to the css leaves us with this-
ps. To see this in action, check out the ruler image at the top… Its actually 1240px wide and I inserted it through WordPress as a “Full Size” image.
No Comments Yet
You can be the first to comment!
Leave a comment