Question

我有一个画廊滑块，来自论坛的随机图片。所以，大小是相当随机的，但画廊（容器框架）本身是固定大小。因此，我们决定将图片height设置为固定大小，但width设置为自动。这样，如果图像的比例与容器比率相差太大，则图像不会被压缩到容器内。

然后，我将容器的text-align设置为居中，以使图像居中。但是，这仅适用于小于容器的图像。如果图像仍然大于容器（调整大小后），则图像将向左对齐。

The jsffidle example

注意：使用背景图像不是解决方案，因为许多浏览器（尤其是IE和一些中国浏览器）仍然不支持调整背景图像的大小。

希望这里有足够的信息。那么，在这种情况下如何将图像居中？

Answer 1

我找到了另一个解决方案

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

和身体

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

每当容器变大或变小时，这将使您的图像居中。在这种情况下，您的图像应该大于容器的300％而不是居中，但在这种情况下，您可以使用containerSecond更大，并且它将起作用

Answer 2

您将使用最大尺寸：

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

看看：http://jsfiddle.net/fabianhjr/zW6eh/

编辑：仍有中心问题，我会尽快回复你。

Answer 3

我有类似的问题，但解决方案是裁剪左右边距，而图像应居中。较小的图像被拉伸。

我的解决方案也在这个JS小提琴中：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 4

我找到的解决方案是：

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 5

好的，我认为这是您最好的解决方案。

您可以将每个图片周围的包装设置为display: table;，然后使用display: table-row;将其中一个包装器设置为img并将其设置为display: table-cell

通过这种方式，您可以在保持比率的同时调整大小。

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

你也可以简单地设置你的身高：200px;这将默认保持宽度自动。

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

5 个答案: