Hide overset for images that extend beyond layout?
Closed this issue · 2 comments
Is there a way to configure CardKit so that if a logo or a photo is larger than the defined layout dimensions, the overset portion is hidden?
Right now the overset shows, and this can be confusing if you are using a photo. You can be fooled into thinking the layout size is larger than it actually is because you can't see the background color behind the photo.
If you're using the in-built UI in CardKit 2, you can add the following CSS rule to your index.html in a <style> tag.
.canvas div.card { height: initial; }
The reason content is visible outside of the layout is so that the card can be responsive to all viewport sizes, for any card size. Adding the above CSS may cause the card editor area to be too small if the card is portrait and very tall. I haven't, as of yet, been able to find a solution that ensures content that spills outside of the SVG area is hidden, while keeping the card scalable in every direction.
Let me know if the above works for you!
Yes, that seems to do what I want. Thanks!