grow image to size of sibling
See: https://svelte.dev/repl/a8f8ff1c7384448d96e36d4a9b30cfea?version=4.2.11
Is it possible to make the icon grow to the height of its sibling?
image grow height • REPL • Svelte
Cybernetically enhanced web apps
6 Replies
that will be difficult
if the image grows in height, it will also grow in width
that will make the sibling smaller in width and possibly make it higher as the text wraps to the next row.
that in turn will make the image grow in height again, turning into a never ending loop
this may be something to work with:
it presents the same issue markboots describes, then paragraph needs adjusted. Also img may not be best in a nested div, but the example is there
@Wonderbear
There's thing with intrinsic sizing where unconsciously, we ask css to try and perform some magic without giving it enough stardust ✨ 🫠
So here, you have a
div, whose width is pretty much 100% of the available parent.
It is a flex element, which means all its children would by default have their width fitting their content.
Hence, the width of your img would be the intrinsic width of the image (as shown in the svg url -> 24px) and same thing goes for the height.
For the div which is the sibling in question, the content overflows the available width of the parent, hence the wrapping. Which means that it will fill the whole parent, leaving space for only the img
This wrapping changes the height of the parent. Which also means that the smaller the width available to the div, the longer the height of the parent would be.
Now, with a height of 100% on the img, you'd be shocked to hear this (maybe not 🌚 ), the img actually fills the 100% height. This is pretty much what align-items: stretch on the parent is already doing to the image.
You can test this out by putting an outline on the image... outline: 2px dashed red
However, what you are really looking for is for the image to visually fill the area its height covers (100%)
You won't notice that because by default, img has object-fit: contain
If you change this to any other thing, like object-fit: cover, you would see it fill the 100% height.
Yet, this still isn't what you are going for (I presume).
I believe you would want a case where you keep the initial style but the width of the image would expand proportionally to the height.
By default css would try to make that work out for you.
However, that is a lot of intrinsic sizing calculations to handle without a reference (Consider the loop scenario @MarkBoots talked about).
So, css would give you the best possible option based on what you have defined.
TLDR
You have to define a height for the parent.this sort of works:
Though, does not fit with all para widths, the image creeps under wider. Looks good para width 50% thru 70%.
++ seeing this isn't responsive.... that one's tough 😄
just tried to do it with a JS resize observer
https://codepen.io/MarkBoots/pen/ExMJLBw?editors=1111
But i dont think you should go this route, it's asking for issues
Exactly!