Aspect ratio
Hi guys!
Why isn't this image resizing to the aspect ratio I'm asking for?
the
img tag at least changes the max-width, but I thought this had to be done on the parent, in this case the figure tag.
https://codepen.io/amarlong/pen/PoBOMNL?editors=110019 Replies
it is 1 / 1 ?
what are you trying to get? cause that is equal height/width
Yas, and so that is what I want. I thought that by setting a width and an aspect-ratio it would automatically calculate its height. Just like the
.test div above.
... no change.
Why does it work on the .test div is my follow up question thenbecause text can wrap, an image is an image
if you want to set the aspect-ratio on the figure, then you can do
mmm is 1 / 1 != 1 ?
I think maybe I misunderstand aspect ratio 😂
i like to do it myself as wel, i know
1 is enough, but it just is more clear, just like 16/9ah ok
but is it not saying equal height/width ?
1/1 is square yes
ooo I had not changed the figure >.>;; (ignore me, thought I was misunderstanding for asec)
Aha! Now it works!
I think I understand it, but could you again explain why just putting a max-width and aspect-ratio on the figure doesn't work, but it does on the div? Yes, words can wrap, but still it seems weird ...
I mean, shouldn't setting aspect-ratio on figure force it's child to size with it?
an image is not responsive by itself.. by setting width: 100%, it adapts to the container where it is in
Ah, I see. So an img should really never be left without a container if you want to control it's size ...
or you have to set a fixed width (not max-width)
So why does it not work to put max-width on the image, but on the container?
This is the reset I've used based on Josh Comeau's reset.
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}
.test {
background-color: blueviolet;
max-width: 300px;
aspect-ratio: 1 / 1;
}
figure {
max-width: 300px;
}
figure > img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
}
Should I change the reset to width instead of max-width, or does that bring in problems later?in a reset i wouldnt do this at all, It's not really a reset, you are setting specific sizes. if you have a figure that needs a larger size, you have to reset it again.
Which is what CSS tricks is talking about here ...?
"Good move for a CSS reset. The block display type there prevents those annoying line-height gaps that always kill me. And you almost never want any of these media blocks to be wider than the parent. I somehow don’t think picture is necessary, though, as it’s not really a style-able block? Could be wrong. I’d probably toss iframe and object in there as well."
Chris Coyier
CSS-Tricks
Notes on Josh Comeau's Custom CSS Reset | CSS-Tricks
We recently talked with Elad Shechter on his new CSS reset, and shortly after that Josh Comeau blogged his.
a reset itself is okay, but the purpose is resetting default styling on elements, not defining it (like you do with max-with: 300 and aspect-ratio: 1/1 and object-fit)
Thank you! It's easy to just take things from these great names for granted. 🧐