scaleflex/js-cloudimage-responsive

Allow scaling only height

josgerrits opened this issue · 9 comments

josgerrits commented

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 commented

hey @josgerrits

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

josgerrits commented

@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 commented

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/

image

josgerrits commented

@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 commented

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 commented

@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>

image

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 commented

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).

  • 👍1
dzmitry-stramavus commented

@josgerrits nice idea, yes 👍

tigerchick commented

Hi, any further updates on this issue?