部分调整图像大小并将其放在容器中心

Question

我想在全角画廊中显示我的图像。 容器是静态的：

#container{
    width:100%;
    height:400px;
}

<div id="container">
   <img src="myimage.jpg">
</div>

我有不同尺寸的图像，所以我希望以高度显示整个图像，而不是在高度上对其进行变形，而是将图像居中（以高度方式）以在中心显示它。

Answer 1

如果你想保持相同的宽高比，但你的图像尺寸不同，那么你最好的解决方案就是Patsy Issa所说的。

使用css

#myimage{
    background: url("myimage.jpg") no-repeat center center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width:100%;
    height:400px;
}

和HTML

<div id="container">
    <div id="myimage"></div>
</div>

JSFiddle：http://jsfiddle.net/qBPy6/