0

所以我发现了类似的问题，但没有一个能回答我所有的问题，而且我知道必须有一个简单的 jQuery 答案。我有多个图像被动态放置在它们自己的包含溢出的 div 中：隐藏，它们需要填充它们的包含 div 并居中（水平和垂直）。包含的 div 也将具有不同的大小。

简而言之：

  • 多个不同大小的图像填充并居中包含 div。
  • 包含 div 的大小将不同。
  • 将在一个页面上多次使用。
  • 图像按比例填充框

希望这张图片有助于解释我所追求的。单击此处查看图像。

我正在使用但可以更改的 HTML

<div class="imageHolder">
    <div class="first SlideImage">
        <img src="..." alt="..."/>
    </div>
    <div class="second SlideImage">
        <img src="..." alt="..."/>
    </div>
    <div class="third SlideImage">
        <img src="..." alt="..."/>
    </div>
</div>

和 CSS

.imageHandler{
    float:left;
    width:764px;
    height:70px;
    margin:1px 0px 0px;
}
.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;
}

如果这没有任何意义，请问我，提前谢谢

4

3 回答 3

1

这是我的 CSS 解决方案的 JQuery 替代方案：

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

$(".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);
    }
});

我只是在运行中对其进行了编码，并没有进行任何广泛的测试，但对于我扔给它的几个测试用例来说，它似乎工作得很好。让我知道它是否不适合您。

于 2013-11-11T06:34:08.690 回答
0

如果我理解正确，这可以使用纯 CSS 来完成，前提是您 1) 可以使用背景图像而不是<img>元素，并且 2) 不需要支持 IE8 及以下版本。

JSFiddle：http: //jsfiddle.net/6nKKX/

HTML：

<div class="imageHolder">
  <div class="first SlideImage"></div>
  <div class="second SlideImage"></div>
  <div class="third SlideImage"></div>
</div>

CSS：（与解决方案相关的部分）

.imageHolder .SlideImage {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.imageHolder .first.SlideImage {
  background-image: url('...');
}
.imageHolder .second.SlideImage {
  background-image: url('...');
}
etc.

或者，您可以在 HTML 中设置内联背景图像<div class="first SlideImage" style="background-image: url('...');"></div>

基本上，background-size: cover;意味着缩放图像直到它覆盖整个盒子（裁剪它外面的任何东西），并background-position: center center;为您居中图像。

于 2013-11-07T10:57:17.890 回答
0

这是我能想出的最简单的解决方案:) JSFiddle 上的完整工作示例。 http://jsfiddle.net/L3HhX/1/

$(document).ready(function() {
$('.center-trigger').click(function() {
    centerImageInTheContainers();
});

function centerImageInTheContainers() {
    $('.container').each(function(i, v) {
        var container = $(this);
        var myImg = $(this).find('img'); 
        myImg.css('top', calculatePosition(container.height(), myImg.height()));
        myImg.css('left', calculatePosition(container.width(), myImg.width()));
    });
}

function calculatePosition(containerSize, imageSize) {
    return 0 - ((imageSize - containerSize) / 2);
}

});

于 2013-11-07T03:49:35.880 回答