Transition Image height
Unanswered
Lithuanian Hound posted this in #help-forum
Lithuanian HoundOP
Anyone have suggestions on how I can transition an image height? I have a local image:
On the root page, I have code setup to watch the
<Image src="{logo}" alt="Site logo">
On the root page, I have code setup to watch the
window.scrollY
and if the user scroll down, shrink the div the logo is in. However, I can't seem to get the image to transition. I tried setting the height
property on the image, and set a css transition, but when it changes, the height just swaps, instead of transitioning. I tried giving the image height through css, but when it transitions, it squashes instead of of shrinking. I also tried wrapping it in a div and giving the image fill={true}
, but then it just becomes giant, far from what I want.4 Replies
Lithuanian HoundOP
I guess also, should I give up on using Image for this, and just use
img
I also tried wrapping it in a div and giving the image fill={true}, but then it just becomes giant, far from what I wantif you add
fill
to the image, the parent should have position: relative
Lithuanian HoundOP
@Rafael Almeida Yah, I had the position relative, it just took the full width; it didn't maintain it's ratio. I'm not sure how to keep the ratio as it resizes.