CODEWITHSUNDEEP
htmlcss
Jon
Jon

Reputation: 8521

Keep an Image Always Centered Regardless of Browser Size

I am wondering if it is possible to keep an img inside a div always centered regardless of the browser size? By being centered I mean that the left/right sides of the image gets cropped to ensure the image stays centered without modifying the height. Also, is it possible to prevent the horizontal scroll bar from appearing when the browser width is less then the image width?

I'm sure this is really easy to do if my image is located in a background-url tag in CSS, but because this image is being housed inside the SlidesJS carousel the image has to be from an img tag.

At the moment, I have used margin:0 auto; to keep the image centered as long as the browser width is larger then the image. Once the browser width shrinks, the image does not resize with the shrinking browser size. I also have yet to figure out how to remove the horizontal scroll bar when the browser width is too small.

This is what I'm trying to achieve: https://i.sstatic.net/amw3O.jpg

This is an example of what the page layout is suppose to look like: https://i.sstatic.net/8J8O7.jpg

Example of my code: http://jsfiddle.net/9tRZG/

HTML:

<div id="wrapper">
    <div id="slides">
        <div class="slides_container">
            <div class="slide"> <!-- Carousel slide #1 -->
                <img src="http://www.placehold.it/200x50/">
            </div>
            <div class="slide"> <!-- Carousel slide #1 -->
                <img src="http://www.placehold.it/200x50/">
            </div>
            <div class="slide"> <!-- Carousel slide #1 -->
                <img src="http://www.placehold.it/200x50/">
            </div>
        </div>
    </div>
</div>​

CSS:

#wrapper {
    width: 200px;
    margin: 0 auto;
}​

Upvotes: 8

Views: 32843

Answers (3)

James
James

Reputation: 720

I am not sure about the align center looks proper to me as for the scroll bar. You can use the following:

overflow-x: hidden;

Upvotes: 1

Shmiddty
Shmiddty

Reputation: 13967

Try this: http://jsfiddle.net/9tRZG/1/

#wrapper {
    max-width: 200px; /* max-width doesn't behave correctly in legacy IE */
    margin: 0 auto;
}
#wrapper img{
    width:100%;       /* the image will now scale down as its parent gets smaller */
}
​

To have the edges cropped, you can do this: http://jsfiddle.net/9tRZG/2/

#wrapper {
    max-width: 600px; /* so this will scale down when the screen resizes */
    margin: 0 auto;
    overflow:hidden;  /* so that the children are cropped */
    border:solid 1px #000; /* you can remove this, I'm only using it to demonstrate the bounding box */
}

#wrapper .slides_container{
    width:600px;            /* static width here */
    position:relative;      /* so we can position it relative to its parent */
    left:50%;               /* centering the box */
    margin-left:-300px;     /* centering the box */
}
#wrapper img{
    display:block;          /* this allows us to use the centering margin trick */
    margin: 2px auto;       /* the top/bottom margin isn't necessary here, but the left/right is */
}

Upvotes: 14

Jon
Jon

Reputation: 8521

Jeff Hines linked putting image always in center page where ShankarSangoli explained how to achieve this.

img.centered {
     position:fixed;
     left: 50%;
     top:  50%;
     /*
         if, for instance, the image is 64x64 pixels,
         then "move" it half its width/height to the
         top/left by using negative margins
     */
     margin-left: -32px;
     margin-top:  -32px;
 }

Upvotes: 3

Related Questions