Menu
Is it possible with pure CSS to make an inline image size (scale) according to the line-height of its parent?
Consider this set-up:
HTML:
<p>
<img src="image.png"/> text text text
</p>
CSS:
p {
line-height: 16px;
}
img {
display: inline;
vertical-align: middle;
}
What I would like is that the image gets scaled to a height of 16px, as is the line-height of the paragraph. Is this possible?
please note: I'm open to changes in the HTML and CSS, but I'm not after a JS solution.
430
We have to give image tag width and height as 100%. And add the object-fit property value as contain. But the difference is if parent div size is more than image size then image will be automatically resized to parent div element size.
It takes the font-size value and multiplies it by 1.2 . Let's calculate the height of one line with the following example. We just have to do the following calculation: 16 * 1.5 = 24px. So we now know that our text will have a minimum height of 24px.
height is set on the element in HTML. width is set on the element in HTML. height (or width ) is set in the CSS — including using percentage values like max-width: 100%;
The default line-height is about 110% to 120% for the majority of the browsers. The line-height property sets the leading of lines of a text. If the line-height value is greater than the font-size value of an element, the difference will be the leading of text.
this works pretty well:
img {height: 1em;}
There's no pure HTML/CSS way to do this, sadly.
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
