Image 'contain' does not contain properly in some device
in progress
I
Izzuddin Yussof
Hi,
App ID: 433230
I put an image in a container, without wanting to specify the exact pixel size of the image. Instead putting the container as a % of the full width / viewport size, and putting the image resize mode as 'contain'
However, it seems that in some computer, it does not properly 'contain' the image as shown in the attachment, while it works properly in another computer.
The issue does not seem to be browser-related, as the same computer will lead to the same result. If it works than all will be working fine. And if it does not than all will not be working
This could be misleading to developer. As the result is shown properly in his/her computer but it could show differently in another user's
Please check. Thank you.
Log In
K
Kirill Leventcov
in progress
V
Vili Karilas
Hello Izzuddin Yussof,
Thank you for reporting this issue. After looking into the app, I can confirm that this a bug related to the image component combined with a surrounding container that has its height set to the viewport height. Changing that container's height to something else fixed the problem of the image cropping on smaller screens and when resizing the screen. I have informed our team of this issue and we'll look into fixing it.
Meanwhile, I found that you might be able to work around this by instead setting your image as the background image of a container instead of using the image component. Set that container's width and height as you did with the image component. Let me know if that works for you.
I
Izzuddin Yussof
Vili Karilas: Hi, thanks for the workaround. I'll try that soon.
K
Kirill Leventcov
Izzuddin Yussof:
Hi,
Have you had a chance to try the workaround?
I
Izzuddin Yussof
Kirill Leventcov: Hi, emmmm the workaround need some level of work to make it work as it doesn't have a 'contain' resize mode. Specifically I needed to make the ratio of the container's dimension to be the same as the picture, which is not really a user-friendly thing to do especially when the picture is not of a 1:1 ratio. In fact there is no guarantee that it will still look fine in another screen with a different dimension...