anythingslider question on appearance (size)

[whipdancer]

I am loading my anythingslider dynamically via ajax. I use the data from the ajax call to add all of my

elements with

tags.

As for sizing, I use imageresizer on our website to dynamically serve our images. The querystring you in the src attribute

src="../some/image/file.jpg?height=150&width=150"

indicates that the image will be made 150×150, preserving aspect ratio (add whitespace to pad as appropriate).

In my css, I’ve set #Slider width:200px and height:160px. In my initialization I set resizeContents: false. I would like the slider view window to stay one size all the time and for my image to be centered in the view window.

Can someone point me in the right direction for accomplishing this?

[Mottie]

Hi whipdancer!

Check out this demo. It uses the css trick from this post to center the image horizontally and vertically. Oh and set the resizeContents option to true, or don’t set it to false since it defaults as true.

HTML

CSS

#slider, #slider li {

width: 200px;

height: 160px;

list-style: none;

}



/*

centering css from here:

https://css-tricks.com/centering-in-the-unknown/

*/

#slider div {

text-align: center;

}

#slider div:before {

content: '';

display: inline-block;

height: 100%;

vertical-align: middle;

}

#slider img {

display: inline-block;

vertical-align: middle;

}

[whipdancer]

Thanks a ton, that is much better.

[Author]

Posts