Allow scaling only height

[josgerrits]

Hi,

We want to automatically scale the image only by height. At the moment this is not allowed since you'll get an error when you only set a "h" in the ci-sizes option.

Is this an easy change? Or do we have to work around this for now?

[dzmitry-stramavus]

hey @josgerrits

We are polishing a new version of the plugin in which it'll be allowed to do.

[josgerrits]

@dzmitry-stramavus I noticed you have released a new version 13 days ago. I still don't see a way to do what i want to achieve. My goal is to have a div with a height of let's say: 400px and full screen width. I want my image to keep it's original aspect ratio and simply take up the height of the div.

I can see you have an option ci-sizes and in the docs you have an example "'(min-width: 620px)': { h: 560 },". But when i use that, i still get the error "w is undefined". I'm using the latest version "4.5.0".

[dzmitry-stramavus]

hey @josgerrits ,

hm, can you do a quick codesandbox snippet of the problem?

Looks working in demo page https://scaleflex.github.io/js-cloudimage-responsive/

[josgerrits]

@dzmitry-stramavus ah my bad, i was using 3.5 instead of 4.5.. I still can't seem to achieve what i want though. Can u explain how i would make the image take up the height of the parent? Here's my sandbox example: https://codesandbox.io/s/js-cloudimage-responsive-example-g3cli?file=/index.html

[josgerrits]

I figured it out, the demo page says: operation="crop". This does not work for me, but when i use ci-params="func=crop" it does. I think that's what i'm looking for.

[dzmitry-stramavus]

@josgerrits ,

currently, you can do the following thing

<div style="width: 200px; height: 400px;">
  <img ci-src="alain.jpg" ci-params="func=crop&gravity=auto" />
</div>

here is updated codesandbox: https://codesandbox.io/s/js-cloudimage-responsive-example-iugg2?file=/index.html

also, I'm doing one more approach to use height detect option. I'm not sure when I have time to finish it though (1-2 weeks probably)

hope it helps

[josgerrits]

Thanks for the help. That's good news. It would be perfect to simply say something like <img ci-src="alain.jpg" ci-resize-orientation="vertical" /> where it would simply detect height and <img ci-src="alain.jpg" ci-resize-orientation="horizontal" /> which is what it does now (detect width).

[dzmitry-stramavus]

@josgerrits nice idea, yes 👍

[tigerchick]

Hi, any further updates on this issue?