CODEWITHSUNDEEP
htmlcssimageslider
YouGo
YouGo

Reputation: 69

Slider width and height without stretching

I'm working on a website for a friend of mine. There's only one problem. The slider won't fit in the frame without stretching.

I've set it to 100% height, but it won't work out. (Its also responsive) I want it to be a nice image in the original width and height (100x100, 200x200 etc) without stretching (200x500).

I hope you guys can help me out on this. I'd tried alot and also asked some other people but they can't help me with this.

You can see the slider over here. http://tinyurl.com/p36hz6u

Here's another version of the slider, but on this version the slider image gets cut off http://tinyurl.com/nfjjvwu

Upvotes: 2

Views: 1360

Answers (2)

Brian John
Brian John

Reputation: 599

If the images are background images, consider using the background-size:contain; which will allow the image to grow as large as visible/possible without stretching, and then you can position the background image wherever desired with background-position

If the slides have actual physical <img /> tags, I made a JSfiddle that demonstrates code that will contain an image within an element. In this example, the <div> tags represent a browser window and can be resized: http://jsfiddle.net/dds27w2y/

Upvotes: 2

Florin Pop
Florin Pop

Reputation: 5135

Firstly what I would do is to remove the: background-size: 100% 100% and add a background-position: center center. Then I would add a background-color: white to the container. This would make it look nicer and it would be centered.

Upvotes: 1

Related Questions