A flex item with a child image does not resize it properly
I found this post, Flex element with child image does not adjust to its original width , which I thought had the answer, but it doesn't, ... well, in part, it was done when the set height is used.
What I want and expect here is that the image fits the height of the text element and then adjusts its width while maintaining its ratio.
This seems to work in Chrome, but not Edge / IE / Firefox. Couldn't test Safari as I don't have an iOS device, so I would appreciate if someone can share how it works there.
This shouldn't be a solution flexbox
, although I expect CSS alone, which means no script .
Edit
The text height specified can be dynamic and based on its content, so the predefined one 200px
should just give it the height, JSFiddle demo, set the height .
JSFiddle demo, content based height
Fragment of the stack
.container {
display: inline-flex;
}
.img img {
height:100%;
}
.text {
background: lightblue;
}
.text-content {
width: 200px;
}
<div class="container">
<div class="img">
<img src="http://placehold.it/160x90">
</div>
<div class="text">
<div class="text-content">
Some text content<br>
Some text content<br>
Some text content<br>
Some text content<br>
Some text content<br>
Some text content<br>
Some text content<br>
Some text content<br>
Some text content<br>
Some text content<br>
Some text content<br>
</div>
</div>
</div>
Expected Output (Hardcode)
.container {
display: inline-flex;
}
.img img {
height:100%;
width: 355px; /* force correct width */
}
.text {
background: lightblue;
}
.text-content {
width: 200px;
}
<div class="container">
<div class="img">
<img src="http://placehold.it/160x90">
</div>
<div class="text">
<div class="text-content">
Some text content<br>
Some text content<br>
Some text content<br>
Some text content<br>
Some text content<br>
Some text content<br>
Some text content<br>
Some text content<br>
Some text content<br>
Some text content<br>
Some text content<br>
</div>
</div>
</div>
source to share
You must define the height at the level .container
. After the CSS will work for all browsers you mentioned above:
.container {
display: inline-flex;
height: 200px;
}
.img {
height: 100%;
}
.img img {
height:100%;
}
.text {
background: lightblue;
}
.text-content {
width: 200px;
}
UPDATE
I'll leave the old answer just in case, but this codepen works . I've tried with varying number of lines and text sizes.
.container {
display: inline-flex;
}
.img img {
height:100%;
}
.text {
background: lightblue;
}
source to share
