Allow scaling only height
josgerrits opened this issue · 9 comments
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?
hey @josgerrits
We are polishing a new version of the plugin in which it'll be allowed to do.
@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".
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/
@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
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.
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
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).
@josgerrits nice idea, yes 👍
Hi, any further updates on this issue?