center a big image in smaller div - html

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.

Answer 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.

Answer 2

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.

Answer 3

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 .

Answer 4

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/