Image not taking 100% width
I am trying to learn how to size images better.
They have always been a pain to me. So i started learning
object-fit.
Code:
The div is meant to take 50% if the page in width, and the img 100% of that.
Simple right?
Height of the div depends on height of image.
Image is display block as to not have the gap at the bottom inline elements do.
However...
16 Replies
The bottom is the same code but with different image.
Why is there a gap on the right side?!
Its supposed to be 100%, and retain aspect ratio for
cover right?
yet...its not doing it.
And whats weirder its not happening for every image like the one above.
And the bottom one is fixed by resizeing the browser in certain spots so it flickers a lot when resizing.Inline styling on image?
It works without style attribute?
yes?
but its using
style="" as a block element
but i am correc to assume the bottom image should more or less always be 100% of the div correct?
rn its 50/50 on 100% and some sort of 99.99%
weirdly the image in inspector takes 100% the div.
Could it be a visual bug?
Ig it must be? 100% width feels like it should be 100% width, plus with a background property it only changes the color of it only if i make the height 1 pixel higher.
like 1 pixel off every other pixel size when resizing
Ok it seems it does show the background color but only 50% of the time on refreshing for this small gap.
Is it safe to assume this is a bug? I never heard of something this random for just an image before XD
Also it might just be the one image? Im not sure, but its very repeatable with the imagetry adding
in your css.. might just also be some default margin or padding
Best to not do this as some elements rely on margin and/or padding to do their job. Only change values for a specific purpose.
ouu.. i thought it's better to use em
i always add it in the beginning of my css 😂
The box-sizing yes. The nuking of all margin and all padding no. Now you have to go back in and re-add padding/margin when they're needed (like for every element so there's at least some space between them).
So you're having the browser add the default margin/padding due to the browser's default style sheet. Then you're having the browser remove all that margin/padding. Then you're adding it back in again. That's a lot of work for the browser to do.
hmm
yaa u r right
any idea as of why this is happening?
Its such an odd thing that it randomly happens with even browser refreshes
could it just be a random floating point rounding issue?
some images it happens, other it seems to never happen
codepen or bust (mean show us it in a codepen so we can reproduce)
can try, need to find a image that works, will try to upload the ones i have rn to imgur
put any other dimensions where it says 200 or 300, and it'll have those x or y sizes
it may look silly, but it works
so its likely a round issue with the image trying to fit visually?
So far i cant releplicate it via code pen
somehow
object-fit: contain works
but ig that has nothing to do with preventing the width not being 100% when specified
invalid parameters
https://codepen.io/DemonSlayer1123/pen/YzJPdwo?editors=1100
Ok this has similar setups now with same size images, same issue
bottom isnt 100% width
but if you change the size, it sometimes does take the 100% width
you can tell by the 1 white line of pixels on the right
And weirdly, i discovered if the parent has a red background sometimes the red will be shown through
But other times it shows only white
what is going on XDInspector claims the
cover IS the right size.
Yet contain takes the full width and is also the same size