Search code examples
jquerycsssupersized

fitting vertically on a full screen img tag

I'm using the Supersized wordpress plugin to present a fullscreen slideshow on http://lorenzo.dentasignclients.com .

One thing that's bugging me, that when viewing in a portrait setting, the images stretch vertically, like so : example

Is there a hack I can implement to make sure that the image is full width and full height, but not stretched in portrait view?

I tried adding a media quite, and making the width and height auto. This accomplished the not stretching, but then the image is no longer the full width and height of the background. 

#supersized img{
    background-color:white;
    width:auto!important;
    height:auto!important;
}

help much appreciated!

Solution

  • Ah! This was a conflict caused by bootstrap.

    The plugin is correctly handling the scaling of the images, but bootstrap prevents all images from going over 100%

    i.e 

        img {
    max-width:100%
    }

    so, just update with 

    #supersized img {
   max-width:none;
}