The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

AnythingSlider and 100% Width/Height Problem

  • # October 19, 2011 at 11:28 am

    Hello. Trying to implement AnythingSlider with a 100% width and height that will adjust to maintain the correct image ratio (ie not stretch the image). I was able to setup the slider with 100% width without a problem, but I’m having trouble getting the height to adjust.

    Currently I have the parent container set to a fixed height, but when it is removed or set to 100% the slider collapses. Any thoughts on how to fix?

    Demo can be found on:

    If I should post specific code snippets just let me know. Thanks in advance.

    # October 19, 2011 at 5:53 pm

    Try this:

    $('#wrapper1').height( $(window).width()/2.3 );

    The images inside of AnythingSlider are 1161×500 in size, or they have an aspect ration of approximately 2.3 (1161 divided by 500).

    So what that code does is applies that same aspect ratio to the container around AnythingSlider (#wrapper1). And since the “expand” option is true, the slider will expand to fit inside of that container and maintain the ratio you want.

    # October 20, 2011 at 1:23 pm

    Awesome, that works perfectly. Thanks for the help Mottie!

    # April 27, 2012 at 12:18 am

    an example to 100% width, hope this help to any one

    # February 27, 2013 at 5:24 am

    tq ill try

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed