如何在较小的容器内动态居中放置图像？

Question

I have a gallery slider, with random images from the forum. So, the size is pretty random but the gallery(container frame) itself is fix sized. So, we decided to set the image height to a fixed size but the width is set to auto. This way, the image will not be squeezed inside the container if its ratio different is too much from the container ratio.

Then, I set the container's text-align to center in order to center the image. But, this only works for images smaller than the container. If the image is still bigger than the container (after resize), the image is aligned to the left instead.

The jsffidle example .

NOTE: Using background-image is not a solution because resizing background image currently is still not supported by many browsers (especially IE and some Chinese browsers).

Hope there is enough information here. So, how do I center the image in this situation?

Answer 1

I have found another solution

<style type="text/css">
    .container {
        width:600px; //set how much you want
        overflow: hidden; 
        position: relative;
     }
     .containerSecond{
        position: absolute; 
        top:0px; 
        left:-100%; 
        width:300%;
     }
     .image{
        width: 800px; //your image size 
     }           
</style>

and in body

<div class="container">
   <div class="containerSecond">
       <image src="..." class="" />
   </div>
</div>

This will center your image whenever your container is bigger or smaller. In this case your image should be bigger than 300% of container to not be centered, but in that case you can make with of containerSecond bigger, and it will work

Answer 2

I had similar problem, but the solution was about to crop right and left margin, while the image should be centered. Smaller images are stretched.

My solution is also in this JS Fiddle: http://jsfiddle.net/david_binda/9tTRQ/

HTML

<div class="thumb-wrapper">
   <a href="" title="" class="img">
      <img src="http://upload.wikimedia.org/wikipedia/commons/4/40/Tectonic_plate_boundaries.png" alt="" />    
</a>
</div>

CSS

.thumb-wrapper{
    width: 200px; // desired thumbnail width
    height: 150px; // desired thumbnail height        
    overflow: hidden;    
    position: relative;
    margin: 0 auto;
}
.thumb-wrapper .img{
    display: block;    
    position: absolute;
    width: 300px; // should be wider than final thumbnail
    height: 150px; // desired thumbnail height
    left: 50%;
    margin-left: -150px; // half of above defined width eg. 300/2 = 150
}
.thumb-wrapper .img img{
    width: auto !important;
    max-width: 300px !important; // should be wider than final thumbnail
    min-width: 200px !important; // desired width of thumbnail
    height: 150px !important; // desired thumbnail height
    margin: 0 auto;
    display: block;
}​

Answer 3

The solution that I've found is:

img{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);//You have to add all the prefixes 
                                  //of transform
}
div.container{
    position:relative;
    overflow:hidden;
}

Answer 4

You would use max sizes:

img {
    max-width: 200px;
    max-height: 200px;
}

Take a look: http://jsfiddle.net/fabianhjr/zW6eh/

Edit: still having centring problems, I will get back to you on that.

Answer 5

Okay, I think this is your best solution.

You set your wrapper around each image to display: table; and then one more wrapper inside that with a display: table-row; and set your img 's to display: table-cell

This way you can resize anyway you like while keeping the ratio.

http://jsfiddle.net/zW6eh/17/

You can also simply set your height: to 200px; This will keep your width auto by default.