css - 部分调整图像大小并在容器中居中

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/