center or maximize image

**Harry2o** · 07-13-2011 01:34 AM

Hi,

could anyone help me out on how to perform the following:

- there's a container (let's say a DIV element) with fixed dimensions (let's say 300x200 px)
- inside there's an image, the dimensions of which are unknown
- if the image is smaller than the container, it should be centered (horizontally + vertically)
- if the dimension(s) exceed/s the container, it should be shrunk so the larger dimension is viewed equal to the container's dimension

Practically this is "center the image in full size inside the container, but if it's too large, shrink it to full visibility".

Cheers

**Cory R** · 07-13-2011 01:51 AM

If an image is larger than the container it will overflow past the container unless the overflow is set to 'hidden' or 'auto'. You can set a max-width and height on the image like so:

Code:

#container img {
max-width: 100px;
max-height: 100px;
}

You could also specify a min-width and height, that way all images will be the same width and height.

**Harry2o** · 07-13-2011 02:17 AM

Awesome, that's exactly what I needed, thanks! (never thought of max-height ....)

However, I can't get to center it (in both directions) within the container if it's smaller .... do I need another container without size that well be centered or can it be done on the IMG directly?

**Cory R** · 07-13-2011 09:51 AM

Can I see the coding you used? text-align: center; worked for me, horizontally. You would have to use top padding to center the image vertically, and keep decreasing the height of the DIV as you increase the padding.

**Harry2o** · 07-14-2011 03:46 AM

See the following code.
The purpose of the whole centering and shrinking process is that the size of picture.png is unknown and will change. Padding wouldn't work as it will depend on the actual size of the image.

HTML Code:

<html>
    <head>
        <title>center and maximize image</title>
        <style type="text/css">
            #container {
                position: relative;
                background-color: #cccccc;
                border: solid black 1px;
                margin-left: auto;
                width: 300px;
                height: 200px;
                margin-right: auto;
            }
            #picture {
                position: absolute;
                max-width: 300px;
                max-height: 200px;
                margin-left: auto;
                margin-right: auto;
            }
        </style>
    </head>
    <body>
        <div style="background-color: #dddddd;">

            <div id="container">
                <img id="picture" src="./picture.png">
            </div>

        </div>
    </body>
</html>

**Cory R** · 07-14-2011 10:15 AM

I recommend whatever method works best for you: http://www.student.oulu.fi/~laurirai/www/css/middle/

Thread: center or maximize image

Thread Tools

Display

center or maximize image

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions