How to CSS an image to not go wider than it's loaded size

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

How to CSS an image to not go wider than it's loaded size

Post by simonmlewis »

We have a Wordpress Blog and we have overwritten some CSS so the DIVs go wider. However the images inside the DIV are stretching too.

One image is loading at 590px, but it stretching at full width.

I thought this would stop it:

Code: Select all

#grve-single-media img
{
max-width: 100% !important;
}
As I thought max-width loads it to 100% only, if it's designated size.

What is the right way to make sure any image there loaded, never go wider than it's core width? ie. 590. But some maybe 790, 850... etc.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
requinix
Spammer :|
Posts: 6617
Joined: Wed Oct 15, 2008 2:35 am
Location: WA, USA

Re: How to CSS an image to not go wider than it's loaded siz

Post by requinix »

Images don't naturally stretch, so if that's happening then you have some CSS somewhere responsible for it.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: How to CSS an image to not go wider than it's loaded siz

Post by simonmlewis »

YEah. I tried width: auto; and that did it. ta.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Post Reply