www.webdeveloper.com
Results 1 to 6 of 6

Thread: center or maximize image

  1. #1
    Join Date
    Jul 2011
    Posts
    3

    center or maximize image

    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

  2. #2
    Join Date
    Jul 2006
    Posts
    207
    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.

  3. #3
    Join Date
    Jul 2011
    Posts
    3
    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?

  4. #4
    Join Date
    Jul 2006
    Posts
    207
    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.

  5. #5
    Join Date
    Jul 2011
    Posts
    3
    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>
    Last edited by Harry2o; 07-14-2011 at 03:47 AM. Reason: used html highlighting instead of code

  6. #6
    Join Date
    Jul 2006
    Posts
    207
    I recommend whatever method works best for you: http://www.student.oulu.fi/~laurirai/www/css/middle/

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles