Divs and Images

[Joseph Witchard]

When specifying div widths/lengths in percentages, how do you make sure your images within the div remain an acceptable presentation? For instance, your div is specified in percentages and your image is specified in pixels. Everything looks great until you look at your site in a smaller screen, and the div is no longer large enough to hold your image. What do you do?

[ray326]

You put the image in the background of the div if cropping it is acceptable.

[Joseph Witchard]

What if the image isn't set as the same dimensions as the div, though? Wouldn't that distort it?

[ray326]

No, it will crop it.

[Joseph Witchard]

From what I understand about cropping (which is only from my experience with Photoshop and Paint Shop Pro), you're cutting part of the image out.

Are we on the same page? lol Please explain.

[Mig]

Yes that's right, but you won't lose any of the image. I'd say it's more like hiding - or masking - the image.

Basically, when an image is the background of the div, you will only see as much of the image as the div size allows. It's like the image is always there behind it, and the div just resizes over it, hiding any of the image that would extend outside of the edges.

[donatello]

When specifying div widths/lengths in percentages, how do you make sure your images within the div remain an acceptable presentation? For instance, your div is specified in percentages and your image is specified in pixels. Everything looks great until you look at your site in a smaller screen, and the div is no longer large enough to hold your image. What do you do?

Specify your images in percentages too. I had this problem with tables. If you only put the percentage on one dimension (e.g. width) the height will automatically match so that the image is not stretched or compressed.

This will depend upon what your images are of course and how they scale.

[Joseph Witchard]

Yes that's right, but you won't lose any of the image. I'd say it's more like hiding - or masking - the image.

Basically, when an image is the background of the div, you will only see as much of the image as the div size allows. It's like the image is always there behind it, and the div just resizes over it, hiding any of the image that would extend outside of the edges.

But isn't that the same as cropping an image in Photoshop? I mean, it's still cutting some of the image out, isn't it?

[ray326]

Yes some of the image is covered up but that's often better than letting the browser resize it.

[Joseph Witchard]

Okay, thanks. Another question: If you put something inside of div, and you specify its width as 100%, will that make it go all the way across the div, or would it still make it go all the way across the page (like it wasn't in a div at all)?

[ray326]

It should remain within the div.

[Joseph Witchard]

Thanks!