Glide.js, how to check size of image?


Tags: jquery,html,css

Problem :

I am using Glide.js to create a slider and I have a problem, I don't know how to check size of image inside slide. I must display picture in this slide in actual ratio, i mean if picture have height larger then width I should use in css height:100%; width:auto; In other way if width is larger than height it should be width:100%, height:auto. And this is my problem, I don't know how to do this. I am a begginer in javascript. I can write something in jQuery, but i don't know if this is correct. My slider look like:

<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 slides 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%"]);
    }`

Could you tell me how to do this :



Solution :

You can limit the image sizes using max-height:100% and max-width:100% in CSS.

Here's a fiddle.


    CSS Howto..

    Explaining how to use classes with SASS to a Python thinker

    How to create a global settings file in react css modules

    How to display print preview as same as the webpage using css?

    Scroll Bar not Fully show the value In Div

    How to get CSS triangles to display in a row instead of vertical

    How to make bootstrap row “col-md-4” fullscreen size

    How to overlay “transformed” element?

    How to place an image on top of Bootstrap NavBar while keeping links clickable?

    css floating problem: how to get a left float to wrap around a right float

    How to achieve straight shadow with CSS?

    sidebar is under the openlayers map how to set css

    How to set different column in table to be different width in css?

    How to set p margin for a section

    How do I add a the bootstrap 'form-control' class to a select using the Simple_Form gem?

    How to change anchor color when you hover over a list

    how to code different type of border in css?

    How to Align text with respect to image css

    How to hide div on swipe in Angular

    How to format CSS of a dropdown menu so if the 'parent' dropdown is current then the children will not take the formatting of the parent

    How to set table cell padding from CSS?

    How to get a fixed DIV to stay on top of an absolute?

    how to simplify font import in css

    HTML5 - Show Items Side By Side

    How to create centered image slideshow behind website content

    How large can CSS values be?

    css transition effects on show/hide element using css3 [duplicate]

    How can I rotate a font icon 45 degrees?

    How to include border-radius.htc in MVC architecture to make border-radius work in IE

    CSS: How to target all elements within a given ID

    How can I set -webkit-mask-box-image through javascript?