0

这是故事...

我在尺寸为 1174px x 375px 的容器内有一个尺寸为 1174px x 660px 的图像。图像的高度被截断，当我将溢出设置在容器上时，只显示图像高度的 375 像素。

我创建了一个 JavaScript 函数，该函数获取此图像 (1174x660) 并将其垂直居中于其容器 (1174x 375) 中，以便图像的中心位于容器的中心。

function allFeaturesImagesResize () {
    var allFeatures = function () {
        var image = $('.all-features article img'),
            container = $('.all-features article'),
            container_height = container.height(),
            image_height = image.height(),
            container_center = .5 * container_height,
            image_center = .5 * image_height,
            center = (image_center - container_center);
            image.css('position','relative').css('bottom', center);

    }
    $(function () {
        $(window).resize(function () {
            allFeatures();
        }).resize();
    });
}

我$(document).ready(function() { //... });在这个函数周围使用了一个包装器，但是，每当页面加载时，我都可以看到该函数正在完成将图像移动到中心点的工作。有没有办法将有效载荷延迟到重新定位完成之后？

请记住，我的网站是流体响应的，这就是为什么我需要动态定位图像，因为我事先不知道用户的视口尺寸（特别是宽度）。

4

1 回答 1

1

使用load而不是ready事件。$(window).load(function(){ ... your code }会告诉代码应该在所有图像加载后才执行。ready即使图像未完成加载，也会在加载 DOM 时触发事件

请注意，您正在选择多个图像$('.all-features article img')。通过这样做images.height()只会获得第一个找到的图像的高度。选择多个容器的行也是如此。

您的代码应翻译为“对于找到的每个图像”：$('.all-features article img').each (function(){...});

于 2013-04-21T01:38:54.703 回答