Hello,
I placed an image in a container but there is a little gap between the container and the image though it is specified with a width of 100%.
Why there is this issue and how to resolve it please?
@Guillaume Le Devin Check this one, I think you are looking for this one.
@Guillaume Le Devin I am attaching the URL for your reference, hope this will help you. @Guillaume Le Devin For 1st image attached in the stylesheet comment the css, for 2nd and 3rd image uncomment it.
briljant, @Naveen N ,
I spent some time last night, but couldn't figure out how to put the rounded border on the picture without distorting it. solution is changing the object-fit to cover, nice.
I think, as you can now put the border on the image, it can be removed from the parent div. To make it 3px instead of total of 6px.
Dorine
@Dorine Boudry We can do that, I just gave @Guillaume Le Devin a solution , he can customize it based on his bussiness requirements.
Thank you, so much @Naveen N, for your help.
Is there any chance you would help me to understand why there is a little space between the yellow border and the black bottom area please?
@Guillaume Le Devin Let me check and get back to you.
@Guillaume Le Devin That space is because of the percentage you used , for that cases you can use pixels to adjust as per your requirement. Attaching a oml for your reference.
Thank you so much for your answer and your help.
I am going to take a look at it. :-)
Hi,
the containers has a fixed width:
If you remove that class your image fill the entire width.
Br,
AL
Thank you for your answer.
I need a width otherwise it you look like this image
I just need to get rid of those gaps, visible in the image
Would it be a bug from Outsystems?
Hello
The issue is not related with borders it is regarding the overflow property and border radiusI have made changes to your CSS and fixed it I am attaching the updated oml that might help.https://personal-wwkmlamd.outsystemscloud.com/Css/Screen1?_ts=638049335362666030
Thanks & RegardsTousif Khan
that's not really an improvement, the image is now distorted because you set the height of it.
My intension was to tell them what causing the error and what is the main issue over here
we can control the behavior of the image by using CSS properties and fix the distortionalso by applying some css properties
ref :https://developer.mozilla.org/en-US/docs/Learn/CSS/Howto/Fill_a_box_with_an_imageHowever thanks for pointing this :)
Tousif Khan