I have the following problem:

I have some text here, it has the font-size property set to 24pt. It looks like this:

<span style="font-size:24pt">lorem ipsum: <a href="/mywebpage/" target="_blank" id="l">even the size of the links change! cool.</a></span>
Everything is fine with that.

Though, I'd like it if somehow, we could make the images inside that span tag respect the font-size property.

(Basically, I want to make the images look like this)

Sadly, they look like this, which is not what I want..:

<span style="font-size:24pt">lorem ipsum: <a href="/mywebpage/" target="_blank" id="l">link</a><img src="https://i.stack.imgur.com/5ucJK.png"></span>

Any ideas?

4 Answers

2
Johannes On Best Solutions

You can use height: 1em;, or if that's too much height: 0.95em; or whatever value in combination with width: auto to adjust the image height in relation to the currently used line-height / font-size.

Just change the font-size n my snippet and you'll see the effect. I used 0.75em to adjust it.

.x {
  font-size: 32px;
}

img {
  height: 0.75em;
  width: auto;

}
<span class="x">lorem ipsum: <a href="/mywebpage/" target="_blank" id="l">link</a><img src="https://i.stack.imgur.com/5ucJK.png"></span>

0
frogman578 On

Use the height and width attributes for the <img> in HTML, you can have it all the way from 1px each, from what I see that image looks a lot larger than just one square pixel, use the margin in CSS to adjust its position if necessary!

Hope this helps! :-)

0
Temani Afif On

Use the image as background like below:

span {
 padding-right:1.3em;
 background:url(https://i.stack.imgur.com/5ucJK.png) right/auto 100% no-repeat;
}
<span style="font-size:24pt">lorem ipsum: <a href="/mywebpage/" target="_blank" id="l">link</a></span>
<br>
<span style="font-size:20pt">lorem ipsum: <a href="/mywebpage/" target="_blank" id="l">link</a></span>
<br>
<span style="font-size:14pt">lorem ipsum: <a href="/mywebpage/" target="_blank" id="l">link</a></span>

1
Atul On

var textSize = $("#text").css("font-size");
console.log(textSize);
$("#img").css("height", textSize)
img {
  vertical-align: middle;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span style="font-size:24px" id="text">lorem ipsum: <a href="/mywebpage/" target="_blank" id="l">link</a><img src="https://i.stack.imgur.com/5ucJK.png" id="img"></span>

This can be achieved by jQuery like this, Don't know the exact requirements but this could be a trick, first get the size of text and then give the same height to img