Fit an image inside an auto grid [duplicate] - html

Question

This question already has answers here:
How to match width of text to width of dynamically sized image/title?
(2 answers)
Closed 2 years ago.
Fiddle
<div id="grid">
<div id="toolbar">
<div>
Some writing.
</div>
<img src="some-link" alt="">
</div>
<div id="main">Main view</div>
</div>
#grid {
display:grid;
grid-template-columns: auto 1fr;
}
#toolbar {
display:flex;
flex-direction:column;
}
Is it possible to force the image to take only as much as width as the text does?
I've got a toolbar with icons that I'd like to have an image on the bottom. The icons decide the width of the toolbar (which resides inside an auto cell of a grid), and I'd like the image to fit exactly that width.

Answer 1

By adding width to toolbar you can achieve this.
#toolbar {
display:flex;
flex-direction:column;
background-color: rgb(225, 225, 220);
width: 99px;
}
img{
max-width: 100%;
max-height: 100%;
}
https://jsfiddle.net/3fydzgxp/2/
Other option you can try using jQuery or javascript by capturing width for text div and applied to img style.
<div id="grid">
<div id="toolbar">
<div id="text">
Some writing.
</div>
<img src="https://smallimg.pngkey.com/png/small/197-1978960_free-new-icon-download-google-chrome-icon-redesign.png" alt="" id="imagetag">
</div>
<div id="main">Main view</div>
</div>
console.log(document.getElementById("text").offsetWidth);
document.getElementById("imagetag").style.width=document.getElementById("text").offsetWidth;