Question

我想让图像填充包含的div，以及将图像居中在div中，在这种情况下，div是具有类名“SlideImage”的div。我知道他们可以通过将它们变成背景图像来完成这项工作，但这在这个项目中是不可能的。

我自己开始使用javascript，但偶尔他们会将图片踢出来，所以右手边在div中居中，似乎是随机时间，并且在不同的浏览器和设备上。

HTML

<div class="imageHolder">
    <div class="first SlideImage">
        <img src="img/img_dummies/coopers_beach_1.jpg" alt="Coopers Beach"/>
    </div>
    <div class="second SlideImage">
        <img src="img/img_dummies/coopers_beach_2.jpg" alt="Coopers Beach"/>
    </div>
    <div class="third SlideImage">
        <img src="img/img_dummies/coopers_beach_3.jpg" alt="Coopers Beach"/>
    </div>
</div>

CSS

.imageHolder{
    float:left;
    margin:0px;
    padding:0px;
    width:764px;
    height:339px;
}
.imageHolder .SlideImage{
    float:left;
    position:relative;
    overflow:hidden;
    }
.imageHolder .SlideImage img{
    position:absolute;
}
.imageHolder .first.SlideImage{
    width:381px;
    height:339px;
    margin-right:1px;
}
.imageHolder .second.SlideImage{
    margin-bottom:1px;
}
.imageHolder .second.SlideImage, .imageHolder .third.SlideImage{
    width:382px;
    height:169px;
}

JS

$(function () {
    $(".SlideImage").each(function () {
        var container = $(this),
            img = $(this).find("img"),
            margin;
        if (img.width() / container.width() < img.height() / container.height()) {
            img.css("width", container.width());
            margin = -(img.height() * img.width() / container.width() - container.height()) / 2;
            img.css("margin-top", margin);
        } else {
            img.css("height", container.height());
            margin = -(img.width() * img.height() / container.height() - container.width()) / 2;
            img.css("margin-left", margin);
        }
    });
});

如果您需要更多信息，请告诉我们。感谢

中心并在容器中按比例填充图像

0 个答案: