search

Codeinwp / Ideal-Image-Slider-JS

Quite simply the ideal Image Slider in vanilla JS.
http://idealimageslider.com
GNU General Public License v3.0
1.57k stars 160 forks source link

Aspect Ratio / Cropping on Resize #15

Closed davegreenwp closed 10 years ago

davegreenwp commented 10 years ago

Hello!

First of all, love the plugin!

The fixed height of the slider means that the image doesn't respond with the correct proportions: you end up with a totally different aspect ratio and the image is cropped.

Do you have any plans to address this?

Cheers, Dave

gilbitron commented 10 years ago

Hi Dave. What would you like to see happen?

davegreenwp commented 10 years ago

Hullo!

I think ideally the background size of the slides needs to be 100%, with the position of the image in the top left. Also, I think it would be brilliant if the script had a couple of aspect ratio options: 4:3 or 16:9 just as an example. Maybe it defaults to 16:9, but open this up as a config option with several defined ratios.

When the page loads and the script runs, it simply checks the width of the slide container and then applies the correct height for that ratio. Alternatively, the script could just calculate the ratio from the image dimensions and apply this by default: with other options available if the user wants to override?

I've got images here that are 1280 x 549 so the ratio is 2.33 which is quite common. So at 640px width, that's going to be 275px height.

I'm half tempted to have a look at the code and maybe submit a PR. :)

Cheers, Dave

gilbitron commented 10 years ago

At the moment I've decided to go down the road of letting the user set the height of the slider. If you want to make it work with aspect ratios it would be easy to do using some custom JS (maybe use the afterChange callback?). However I don't think I'm going to include it in the core at the moment, unless there is a huge demand for it.

DannyCooper commented 10 years ago

Is there a way to programmatically scale the height as the width changes?

Simple example: if the starting size is 900px x 300px. By the time the width reaches 600px the height would be 200px.

I've tried using media queries but it doesn't seem possible to do it in a linear manner.

Thanks for IIS Gilbert, it's extremely useful.

davegreenwp commented 9 years ago

A callback function that adjusts the height based on the chosen aspect ratio for the current width when the page is loaded will work. I'll probably be doing this myself over the next few days or so.