How can I fix CSS on my site, so large images do not overflow their container?

Question

I have a really cool site that allows people to upload images. Sometimes the images are really large, as shown in the following div:

Overflow http://img242.imageshack.us/img242/6711/overflowds1.png

Is there a style that I can add to my DIVs to fix this?

Answer 1

Set the CSS overflow property in the div for one of them:

overflow: auto; /* Adds scrollbars only when necessary */ overflow: scroll; /* Adds inactive scrollbars until needed, then activates */ overflow: visible; /* Causes the div to expand to fit the content */ overflow: hidden; /* Hides any content that overflows */ 

Answer 2

You can use the CSS overflow property: set it to hidden or auto to hide the content or add scrollbars if necessary.

Answer 3

Generally speaking, with large images you want them to be thumbnails rather than automatically displaying them, especially if they exceed a certain size.

Using CSS height and width attributes (or height and width attributes) will scale the image, but it will load it all the same. If that can be a big problem. It’s best to create a thumbnail for the download, display it, and then allow the user to click on it to display the full-size image.

Answer 4

 <style>img { max-width: 100% }</style> 

This will resize the images in the browser in their box. There are several drawbacks, one of which is that it obviously won’t work in IE6 (maybe 7?), And if an addition is added to the containing element, you will need to wrap around the image to fit.

Answer 5

Another great, though not fully supported, will add max-width: 400px to your image.

Answer 6

Instead of using CSS, you should do a basic width and height check on your server side, and if it goes beyond a certain threshold, use HTML / Javascript to resize the image. Many forum forum applications for websites do this and often allow you to click to expand an image.

Then, make sure you use the Z-LAYER property to make sure the image floats above the blocks of content, so when the image extends it above all.

Answer 7

Automatically resize each uploaded image using a set of tools such as ImageMagick . You will also get better images because they will be resample (and not just resize).

Then you can create beautiful thumbnails, previews and other sizes of each image that fit nicely into your templates.

Answer 8

If you don’t want to completely resize the actual image file and want to keep the image proportions, you can poll the image by its size (height and width), and then multiply them by the required ratio to fit into your div.

For example, if you have an image of 1024x768 and you want to place it in a div with a width of 800, you know that the width will be 800 and the height will be 768 x (800/1024) = 600. Then, when displaying your image, you can set the necessary height and width options.

Answer 9

or, with a little javascript snippet, you can check the image width. if the size is larger than Xpx, then you scale to Ypx. Of course, you will have a small “image” until the page is fully loaded.

You can inspire yourself on any IPB forum :)