Question

我正在使用Glide.js创建一个滑块，我有一个问题，我不知道如何检查幻灯片内的图像大小。我必须以实际比例在这张幻灯片中显示图片，我的意思是如果图片的高度大于宽度我应该在css高度使用：100％;宽度：汽车;换句话说，如果width大于height，则宽度应为：100％，height：auto。这是我的问题，我不知道该怎么做。我是javascript的初学者。我可以在jQuery中写一些东西，但我不知道这是否正确。我的滑块看起来像：

<div class="slider" id="paintSlider">
                                    <ul class="slides">
                                        <li class="slide paint">
                                            <span> <img src="img/glowna_tlo.jpg" alt=""> </span>
                                        </li>
                                        <li class="slide paint">
                                            <span> <img src="img/NORWAY-FIRE-COMMUNICATION.jpg" alt=""> </span>
                                        </li>
                                        <li class="slide paint">
                                            <span> <img src="img/taipei-fireworks.png" alt=""> </span>
                                        </li>
                                        <li class="slide paint">
                                            <span> <img src="img/00003761.jpg" alt=""> </span>
                                        </li>
                                        <li class="slide paint">
                                            <span> <img src="img/super-squirrel.png" alt=""> </span>
                                        </li>
                                        <li class="slide paint">
                                            <span> <img src="img/searing-mountain.png" alt=""> </span>
                                        </li>
                                    </ul>
                                </div>

JQuery的：

`var imgS = $（“＃paintSlider slide slides img”）;

    var wysokosc = imgS.height();

    var szerokosc = imgS.width();


    if(wysokosc > szerokosc){
        imgS.css(["height","100%"] ["width","auto"]);
    }
    else if(wysokosc<szerokosc){
        imgS.css(["height","auto"] ["width","100%"]);
    }
    else{
        imgS.css(["height","100%"] ["width","100%"]);
    }`

你能告诉我怎么做：

Answer 1

您可以使用CSS中的max-height:100%和max-width:100%限制图像尺寸。

这是fiddle。

Glide.js，如何检查图像大小？

1 个答案: