Scale Image to fit div

Get Started
1

Hello!

I’ve been looking around for a solution to this, but can’t find it (the “static full page image” post below didn’t help!) so maybe you can help me out.

My site is made of 3 divs, 2 fixed ones on top and bottom, and one in the middle which size varies with the browser window. I need to put a picture in that div that scales to the size (preferably the height) of the div (which will change when the browser window is resized, or according to different screen resolutions).

Here’s my css now:



#content {
	overflow: hidden;
	position: absolute;
	z-index: 5;
	width: 80%;
	top: 10px;
	bottom: 120px;
	left: 10%;
}

#img.content {
	height: 100%;
	position: absolute;
	top: 0;
}

You guys have a suggestion? I’m stuck at this part of the code and can’t go any further until Ive found a solution. Anything would be welcome!

Many thanks :slight_smile:

2

Hello princesskarlotta, welcome to SitePoint!

If the image is the only content of the Content div, you could just try this:

#content img {
	width: 100%;
}

If you need content on top of the image, then more work will be needed.

3

Hi! Thank you for your reply, but -

  1. the image may not be the only thing I put in that div;
  2. it’s more important that it’s 100% of the height than 100% of the width;

and finally, 3. it doesn’t work. The image doesn’t scale, it remains at 100% of its own size, not 100% of the size of the div.

Here’s my html:


<div id="content" align="center">
<img class="content" src="content.jpg" /> </div>
4

The bit I’ve marked in bold doesn’t make sense.

Assuming you have
<div id=“content”><img …></div>
what you need is
Content img {…}

5

But wouldnt that apply the css of “Content img” to all images that would be in the “content” div? I was trying to define a class of images (those that I’d put in the div and that would need to be scaled). Some won’t need to be scaled, so I didnt want to make a general rule about all images in the “content” div.

Makes sense?

6

Then use the selector #content img.content.
(Or just img.content.)

The one you used, #img.content matches any element (not only images) that has the class ‘content’ and also has id="img".

7

There may be a way to make it work, but the bottom line is that the web is not really designed for this kind of effect. (There’s likely to be all sorts of cross-browser misery.) The ideal is to use a background image—nice, simple and reliable. You can be creative with it, too. Perhaps, at a certain height, let it fade into a background color. Or make it gigantic so that even the tallest viewports will show image at the bottom (although at lower heights the bottom will be cut off).

It is a ‘photographic’ image (I can’t think of the right term) or something like a gradient?

8

Hi!

Thank you guys for trying to help me through this, it’s much appreciated. I must be doing something wrong, because your suggestions are not working.

I uploaded the site in order to show you - with the code, and the visuals, you’ll be better able to understand what I’m trying to do, and what I’m doing wrong!!

If you wouldn’t mind checking out

karlotta.com/new

you’ll see a bottom div with a menu, and the top div with the content, which on the index page is that darn picture that I need to be adjustable so that on browser resize, we can still see the whole photo (and not just its top left corner!)

Help!

Million thanks…

PS: nothing else works on the site, this is just the beginning of the structure, so don’t worry about dead links… etc.

9

It seems to work for me (Opera 10.10/Linux), but of course I don’t know how it’s supposed to look. As Ralph said, this approach is probably not a very good idea. Client-side scaling of large photographic images normally leaves a lot to be desired.

10

Really, the image scales down as you make the browser window smaller? Doesn’t work from here on Safari and Firefox…

I’m bummed. I’m a photographer, and the photo on the index page is going to be what makes it or breaks it as far as clients staying on the site, so it’s such an important detail to me.

Anyhoo, thanks for your help!

11

Nope, it isn’t working for me with Opera 10 - the image is being cropped, not resized.

As Tommy said, if you are asking browsers to resize a photograph, it’s not going to go well. There are some things that browsers are good at, and there are some things that most of them are very bad at - resizing photographs is one of the second type. Even if you find a way to make them do it, they will generally do a horrible job, and it will look messy and pixelated.

What I would try to do is to get a photo that has the focal point in the middle, with the edges less important, and then put it on the page as a background image to a <div>, but centred within the <div> - so that it crops equally from top and bottom, and from left and right. That will generally look better than browsers trying to resize the image on the fly.

12

Thanks Stevie, I’d thought of that as a second option, but I don’t know how to center the background image within the div, so whatever I did, it kept cropping it to the top left corner (which, on most of my pictures, seriously isn’t the most fascinating area!)

How do I code that?

Thanks for your help, cheers!

13

That’s easy enough. Do it like this:


#content {
    background: url(dirty10.jpg) no-repeat scroll 50% 0;
}

You will probably need to make the image a lot larger, though, to fill the background.

Just for the heck of it, I did try adding height: 100% to the image as you have it now, and it worked ok in Firefox, but problay won’t work cross browser. I find width: 100% more reliable generally, which is also a viable option.

<img src=“dirty10.jpg” id=“dirty” style=“height: 100%;”>

or

<img src=“dirty10.jpg” id=“dirty” style=“height: 100%;”>

14

No, it doesn’t. Didn’t try that. But that’s because your CSS selector doesn’t match your markup. :slight_smile:

You have <img id="dirty"> in your markup, but your selector uses .dirty.

Either change the markup to use <img class="dirty"> or change your CSS selector to use #dirty. (But not both! :))