CODEWITHSUNDEEP
javascripthtmlcss
colinwd
colinwd

Reputation: 67

Fluid images with height property set in HTML

I'm working on a site with a fluid layout, using percentages for all the widths and margins and such. I'd like to use the img { max-width: 100% } trick to make the images fluid as well, but I've run into a bit of a problem.

I'm using embedagram to grab the latest instagram photo from an account and display it at 500 x 500 px. This works fine, but the way it does this is to toss the dimensions directly into the HTML like so:

<img src=" " title=" " width="500" height="500" border="0" align="absmiddle">

So, max-width still works, but the image no longer scales proportionally - it just squishes and gets distorted. max-height: 100% doesn't help. I'm having a tough time understanding the instagram API documentation and how that would translate to javascript, otherwise I'd probably scrap embedagram and just do it myself.

Upvotes: 1

Views: 493

Answers (2)

Brent
Brent

Reputation: 2971

You just need to add height: auto to your style declaration:

img {
  max-width: 100%;
  height: auto;
}

Here's a fiddle: http://jsfiddle.net/VDB7A/

Upvotes: 2

robmisio
robmisio

Reputation: 1176

A quick fix would be to style the dimensions of the image with CSS using the !important directive:

img {
    width: 100% !important;
    height: 100% !important;        
}

I believe that's the only way you're going to get your css to take precedence over the attribute settings in the markup.

A cleaner solution may be to eliminate the attributes altogether, but that would involve some scripting - either modifying the plugin to not include them in the first place -or- reset them after they've been set.

Upvotes: 2

Related Questions