在JS中获取多张图片的宽度

Question

我使用的是一个JS滑块，每个5张幻灯片都有一个图像和一个标题。我只想在宽度大于2xheight的图像中添加一个类。以下是我的JS代码：

$(".slides img").each(function() {

    var w = $("img.gallery").width();
    var h = $("img.gallery").height() * 2;

    if (w > h) {
        $(this).addClass("auto");
    };                    
});

请帮我解决这个问题。先谢谢你，希拉克。

下面是我的HTML代码：

<div class="flex-container">
                <div class="flexslider">
                    <ul class="slides">
                        <li>
                            <span data-picture data-alt="WK Credentials">
                                <span data-src="images/large/slide1.jpg" data-media="(min-width: 1601px)"></span>

                            </span>
                            <img src="images/slide5.jpg" id="myImg" alt="" title="" class="gallery" />
                            <p class="flex-caption">Captions and cupcakes. Winning combination.</p>
                        </li>
                        <li>
                            <center>
                                <div class="intro">
                                    <h1 class="head">Incredible India | Tiffin</h1>
                                    <p class="text">Use what you know about your users to determine whether the words 
                                    and phrases you plan to use are appropriate.</p>
                                </div>
                            </center>
                        </li>
                        <li>
                            <span data-picture data-alt="WK Credentials">
                                <span data-src="images/large/slide2.jpg" data-media="(min-width: 1601px)"></span>

                            </span>
                            <img src="images/slide2.jpg" id="myImg" alt="" title="" class="gallery" />
                            <p class="flex-caption">This image is wrapped in a link!</p>
                        </li>
                        <li>
                            <span data-picture data-alt="WK Credentials">
                                <span data-src="images/large/slide3.jpg" data-media="(min-width: 1601px)"></span>

                            </span>
                            <img src="images/slide3.jpg" id="myImg" alt="" title="" class="gallery" />
                            <p class="flex-caption">Captions and cupcakes. Winning combination.</p>
                        </li>
                        <li>
                            <span data-picture data-alt="WK Credentials">
                                <span data-src="images/large/slide4.jpg" data-media="(min-width: 1601px)"></span>

                            </span>
                            <img src="images/slide4.jpg" id="myImg" alt="" title="" class="gallery" />
                            <p class="flex-caption">Captions and cupcakes. Winning combination.</p>
                        </li>
                        <li>
                            <span data-picture data-alt="WK Credentials">
                                <span data-src="images/slide5.jpg" data-media="(min-width: 1601px)"></span>
                            </span>
                            <img src="images/slide5.jpg" id="myImg" alt="" title="" class="gallery" />
                            <p class="flex-caption">Extra Wide Image</p>
                        </li>
                    </ul>
                </div>

                <ul class="flex-direction-nav">
                    <li><a class="prev" href="#"><img src="images/themes.png" alt="" title="" /></a></li>
                    <li><a class="next" href="#"><img src="images/themes.png" alt="" title="" /></a></li>
                </ul>

            </div>

Answer 1

试试这个：

$(document).ready(function(){
   $(".slides img").each(function(){
     $(this).load(function(){
        var w = $(this).width();
        var h = $(this).height() *2;

        if(w > h){
          $(this).addClass("auto");
        };
     });
   });
});

Answer 2

如果类"gallery“在这里确实很重要，这可能会有所帮助，否则其他答案也会起作用。

$(window).load(function(){
    $(".slides img.gallery").each(function(){
        if($(this).width() > ($(this).height()*2)) {
            $(this).addClass("auto");
        };
    });
});