/    Sign up×
Community /Pin to ProfileBookmark

Auto-size an image using css

Copy linkTweet thisAlerts:
Mar 06.2009

Here is what I am trying to do… I have a database with multiple entries. Each entry contains a link to an image from another website. Each image varies in size. I would like to display the images on my website (keeping the aspect ratio). The area on my website to display the images, for example, is 100x by 100y. I would like to view 100% of my image (no overflow).

I would like something that makes the image display as 100x width and auto-height if the width > height; and display as 100y height and auto-width if the height > width.

Since I am not hosting the images, I can’t do an if/else statement in my code, and figure that CSS may be my best hope. (I have found how to do close to what I want:

[code=php]<style>
#image_container
{
width:10em;
height:10em;
border:3px double #999;
}

#image_container img
{
width:100%;
height:auto;
}
</style>[/code]

The issue being that if the image is taller than it is wide, the image overflows. If there is another way to look at this, I’m open to suggestions.

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangMar 07.2009 — Requires JavaScript to determine the height/width ratio, then set the height or width to 100% accordingly.
Copy linkTweet thisAlerts:
@MrLeNMar 07.2009 — well, you could do a couple of things.

Firstly, you could simply float the container to the left.

<i>
</i>#image_container
{
float: left;
width:10em;
border:3px double #999;
}



..but you'd have to take the height out.

Or, you could use a css overflow (while keeping the height):


<i>
</i>#image_container
{
width:10em;
height:10em;
border:3px double #999;
overflow: auto;
}



That will make a little scrollbar appear, which doesn't exactly look pretty -- but at least all the squares will be in line.

Alternatively, you could also display a width and height (by pixel) for the image itself. It might squish the images a little, but at least there wont be a scrollbar.

<i>
</i>#image_container img
{
width:100px;
height:100px;
}

Copy linkTweet thisAlerts:
@gift2womenauthorMar 09.2009 — I suppose I should move this to a javascript forum to ask this, but anyone have a sample javascript code that could do what I initially requested?
×

Success!

Help @gift2women spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...