center a big image in smaller div

Question

My goal is to center an image which is bigger in a my div. I do not want to resize the image. The center of the image must be displayed.

My div is defined like:

div.thumbnail 
{
   display: block;
   margin: auto;
   height: 100px;
   width: 100px;
   overflow: hidden;
}

And then my idea was to create this additionally for the image:

div.thumbnail img 
{
   overflow: hidden;
   margin: auto;
}

The HTML looks like:

<div class="thumbnail">
    <a href="{{ url_for('showphotos') }}?key={{ album['AlbumName'] }}">
        <img src="{{ url_for ('static', filename=album['ThumbPath']) }}">
    </a>
</div>

But this does not work for me. Any advice how to fix this?

Thanks Darrell.

If you could provide a fiddle of the issue it would be easier to understand what you're asking for. — AJak, Aug 29 '13 at 20:42
You say it's not working for you - what behavior are you seeing? — user1618143, Aug 29 '13 at 20:43
you can take overflow hidden off of the image. Set it to display block and give it say, margin:-20% 0 0 -20%; If you want to center it perfectly I think you will need some js... or if you know your images will all be the same then just give them a specific negative margin. I usually just use -20% when I want to achieve this effect. Edit: I guess you would want to do this to the not the img. missed that. — Shan Robertson, Aug 29 '13 at 20:44
AJak, I want to create thumbnails of images which vary in size. The image can be portrait or landscaped. If I resize the image is always looks akward and to compressed. — DeChinees, Aug 29 '13 at 21:26
The images can be portrait or landscaped. the size may vary. — DeChinees, Aug 29 '13 at 21:28

score 1 · Answer 1 · answered Aug 29 '13 at 20:46

Horizontally centering the image should be straightforward, but vertically centering page elements is a pain. A cleaner solution would be to set the image as the background-image of the div (or possibly the anchor tag) and use the other css background properties to position it. Something like: style="background-image: url([url]); background-position: center" should do the job.

score 1 · Answer 2 · answered Aug 29 '13 at 20:52

This is by far the easiest solution I know, you need two divs to do what you are trying to do. like so:

   <div class="thumbnail">
      <div class="image-container">
        <a href="{{ url_for('showphotos') }}?key={{ album['AlbumName'] }}">
            <img src="{{ url_for ('static', filename=album['ThumbPath']) }}">
        </a>
      </div>
    </div>

css

   .thumbnail{
     width: 100px;
     height:100px;
     overflow:hidden;
   }
   .image-container{
     width: 100%;
     height: 100%;
     //use the margin property to position the image in the div.
     margin: 0 0 0 0;
   }

we set the thumbnail div to whatever size we want and by making the overflow hidden the div inside thumbnail, in this case our image will be full size but cropped to what ever spot of the image we wish to show .

Be aware: This won't work well if the images are not a consistent size. — user1618143, Aug 29 '13 at 21:14

Krasimir · Accepted Answer · 2013-08-29T21:16:29.900

1

Here is the trick. It is easy to center the image horizontally. However the vertical centering is not so easy and involves more markup. You may use background-position property. Here is jsfiddle http://jsfiddle.net/krasimir/ydzZN/2/

HTML

<div class="thumbnail">
    <a href="#" style="background-image: url('http://www.australia.com/contentimages/about-landscapes-nature.jpg')">
    </a>
</div>

CSS

div.thumbnail {
    display: block;
    margin: auto;
    height: 100px;
    width: 100px;
    overflow: hidden;
    position: relative;
}
div.thumbnail a {
    display: block;
    width: 100%;
    height: 100%;
    background-position: center center;
}

There is a bad effect of course. Your image will not be indexed, because it is in a css style.

edited Aug 29 '13 at 21:16

answered Aug 29 '13 at 21:08

Krasimir

13,306
3
40
55

That's a really **bad** practice. If you're going to use `background-image`, set the background image property on `` element. [`src` attribute is obligatory for `` element](http://www.w3.org/MarkUp/html3/img.html) – Hashem Qolami Aug 29 '13 at 21:13
Also, you forgot to add `position: relative` to `.thumbnail`. Without it, the image will stretch all the way across the page. It won't display wrong in this case, but it's one of those things that can screw you up. – user1618143 Aug 29 '13 at 21:13

score 1 · Answer 4 · answered Aug 29 '13 at 22:15

To center multiple sizes of images inside of a single sized div, set the image as the background (centered) of the div in CSS - no img elements necessary. Then set a fixed width for the div and hide the overflow.

<div class="s1"> [ Content ] </div>
<div class="s2"> [ Content ] </div>
<div class="s3"> [ Content ] </div>

div{
    width:300px;
    height:300px;
    overflow:hidden;
}
.s1{
    background:transparent url("http://placehold.it/500x500") center center no-repeat;
}
.s2{
    background:transparent url("http://placehold.it/700x500") center center no-repeat;
}
.s3{
    background:transparent url("http://placehold.it/500x700") center center no-repeat;
}

http://jsfiddle.net/daCrosby/sYgHG/1/

center a big image in smaller div

4 Answers4

Linked