css - 在 div 中调整图像大小

Question

我目前有一个比包含 div 更大的图像，其中 div 的宽度为 70 像素，高度为 45 像素。

我想要做的是在 div 内水平/垂直居中图像，并在保持纵横比的同时调整图像大小。

调整图片大小时，如果宽边大于高，调整图片使图片高度为div的高度，居中后隐藏宽度溢出。

如果图片高度大于宽度，调整图片大小使宽度与div宽度一致，垂直居中后隐藏高度溢出。

调整图像大小时必须保持纵横比。

如果图片的高度和宽度小于div，则将图片居中放置在div中，完成。

这是一张图片，展示了我要完成的工作:http://i.imgur.com/hQjUsJA.png

我知道我可以使用 javascript 或 jquery 插件来做到这一点，但无论如何都可以使用 CSS 来做到这一点吗？

如果是这样，我该怎么做？

我目前拥有的:

.container
{
    position: relative;
    height: 45px;
    width: 70px;
    overflow: hidden;
    border: 1px solid #111;
}

.container img
{
    display: block;
    max-height: 45px;
    max-width: 70px;
    height: auto;
    width: auto;
}

<div class="container">
    <img src="http://placehold.it/350x150" />
</div>

fiddle :http://jsfiddle.net/zqwVJ/

谢谢。

Answer 1

我想这就是你想要的:

jsFiddle

$('img').each(function(){
    var $height = $(this).height();
    var $width = $(this).width();
    var $parent = $(this).parent();
    $height -= $parent.height();
    $width -= $parent.width();

    if($height < $width){
        $(this).height($(this).parent().height());
        var $width = $(this).width();
        $width -= $parent.width();
        $(this).css('margin-left',-1*( $width/2));
    }
    else{
        $(this).width($(this).parent().width());
        var $height = $(this).height();
        $height -= $parent.height();
        $(this).css('margin-top',-1*( $height/2));
    }

});

注意:不要忘记div { overflow:hidden; }