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回実行され、クラスを割り当てると想定され、左の値はイメージを中央に配置します。

しかし、最初の反復では、2番目の反復の高さの値が得られます。最初の位置では、反復の幅が求められます。奇妙なハァッ。

私は達成しようとしているイメージを添付します。このジレンマにどう対処するかについての提案があります。 Structure

Answer 1

ありがとうございます。実際には、イメージの現在とレンダリングされた幅と高さを指定して2行追加するだけで修正されました。

// 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>