javascript - jQuery each() 第一次迭代是错误的，其余的都是正确的

Question

因此，我正在创建一段代码，使我的 div 中的图像自动居中和调整，因此它们适合方形框。

目前，我已经设法做到了，但是，第一次迭代出了点问题，因为我得到了错误的结果，让我给你看一下代码。

// news section height calculator
    $(window).load(function () {
        $('.news-picture').find('img').each(function () {
            
            var screenImage = $(this);
            var theImage = new Image();
            theImage.src = screenImage.attr("src");

// Get accurate measurements from that.
            var imageWidth = theImage.width;
            var imageHeight = theImage.height; 
            
            var $imgClass = (imageWidth / imageHeight);  
            var $imgPos = -((imageWidth - $(window).width()) / 2);
            console.log(imageWidth);    
            console.log($(window).width());  
            
            if ($imgClass >= 1) {
                $(this).addClass('wide').css("left" , $imgPos);
            } else {
                $(this).addClass('tall');
            }
        });
    });

                    <div class="news-picture">
                        <a href="<?php echo wp_get_shortlink(); ?>"><?php the_post_thumbnail('large'); ?></a>
                        <div class="news-title">
                            <h1><a href="<?php echo wp_get_shortlink(); ?>"><?php the_title(); ?></a></h1>
                            <div class="datetime"><span><time datetime="<?php the_time('l, F j, Y'); ?>"><?php the_time('l, F j, Y'); ?></time></span></div>
                        </div>
                    </div>

您可能已经注意到，我正在使用 Wordpress，特别是帖子图像。

案例；迭代运行 3 次，它应该分配一个类和一个左值，它将使图像居中。

但是，第一次迭代获取第二次迭代的高度值，而第二次迭代首先应该获取其自身迭代的宽度。奇怪啊。

我将附上一张我正在努力完成的图片，也许您对如何解决这个难题有建议。 Structure

Answer 1

感谢您的关注，我实际上只添加了两行，指定了图像的当前和渲染宽度和高度。

// news section height calculator
    $(window).load(function () {
        $('.news-picture').find('img').each(function () {
            
            var screenImage = $(this);
            var theImage = new Image();
            theImage.src = screenImage.attr("src");
            theImage.width = screenImage.attr("width");
            theImage.height = screenImage.attr("height");
            
// Get accurate measurements from that.
            var imageWidth = theImage.width;
            var imageHeight = theImage.height; 
            
            var $imgClass = (imageWidth / imageHeight);  
            var $imgPos = -((imageWidth - $(window).width()) / 2);
            console.log(imageWidth);    
            console.log($(window).width());  
            
            if ($imgClass >= 1) {
                $(this).addClass('wide').css("left" , $imgPos);
            } else {
                $(this).addClass('tall');
            }
        });
    });

body {
  margin:0;
}
.news-content {
background-color: #fff;
    margin: 25px auto;
}

.news-picture {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    position: relative;
    overflow: hidden;
    width: 100vw;
    height: 100vw;
    margin: 0 auto;
  }
.news-picture:after {
    -moz-box-shadow: 0 0 10em #000 inset;
    -webkit-box-shadow: 0 0 10em #000 inset;
    box-shadow: 0 0 10em #000 inset;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
}
.news-picture a {
    border: 0;
    display: block;
}
.wide {
    height: 100vw;
    width: auto;
    max-width: initial;
    position: relative;
}
h1 {
  
}
.news-title {
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
    position: absolute;
    bottom: 0;
    width: 100%;
    }
    .news-title h1 {
    padding: 15px 10px 0 10px;
    margin: 0;
    text-align: center;
    line-height: 22px;
    font-size: 16px;
}
.news-title h1 a {
    color: #fff;
    margin: 0;
    text-decoration: none;
    font-family: "Oswald", sans-serif;
}
.datetime {
    font-family: "Titillium Web", sans-serif;
    font-size: 10px;
    padding: 5px;
    margin-bottom: 5px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="news-container">
    <div class="news-content">
        <div class="news-picture">
            <a href="#"><img width="1298px" height="934px"  src="http://www.elliotjaystocks.com/assets/article_digest_1.png"></a>
            <div class="news-title">
                <h1><a href="#">First Iteration of the problem</a></h1>
                <div class="datetime"><span><time datetime="Sunday, October 23, 2016">Sunday, October 23, 2016</time></span></div>
            </div>
        </div>
    </div>

    <div class="news-content">
        <div class="news-picture">
            <a href="#"><img src="https://guides.area17.com/app/uploads/sites/2/2015/10/05.08_AI_smart_guides-680x301.png"></a>
            <div class="news-title">
                <h1><a href="#">Second Iteration of the problem</a></h1>
                <div class="datetime"><span><time datetime="Sunday, October 23, 2016">Sunday, October 23, 2016</time></span></div>
            </div>
        </div>
    </div>

    <div class="news-content">
        <div class="news-picture">
            <a href="#"><img src="https://s-media-cache-ak0.pinimg.com/736x/d6/05/49/d60549cbc19204feee1a672f71e43cee.jpg"></a>
            <div class="news-title">
                <h1><a href="#">Third Iteration of the problem</a></h1>
                <div class="datetime"><span><time datetime="Sunday, October 23, 2016">Sunday, October 23, 2016</time></span></div>
            </div>
        </div>
    </div>
</div>