Question

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

我要做的是将图像水平/垂直居中在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>

小提琴：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; }

Answer 2

如果您的图片是动态的，我会使用背景大小和内嵌背景图片：

<强> HTML

<div style="background-image:url(image-source.jpg);></div>

<强> CSS

background-size: cover;
background-repeat: no-repeat;
width:200px;
height:200px;

Answer 3

如果您的图像是背景图像，则可以轻松完成。

<div style="width: 70px; height: 45px;
    background-image: url(http://placehold.it/30x30);
    background-color: #ddf; background-position: 50% 50%;
    background-size: contain;
    background-repeat: no-repeat">
</div>

如果不是，你可能需要JS。

这是一个小提琴：http://jsfiddle.net/acbabis/CjNEc/

调整div内的图像大小

3 个答案: