Question

我有以下问题：

我在这里有一些文字，它的font-size属性设置为24pt。看起来像这样：

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

一切都很好。

尽管如此，如果我希望通过某种方式，我们可以使span标签内的图像尊重font-size属性。

（基本上，我想使图像看起来像this）

可悲的是，它们看起来像这样，这不是我想要的..：

<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>

有什么想法吗？

Answer 1

您可以使用height: 1em;，或者使用过多的height: 0.95em;或与width: auto结合使用的任何值来相对于当前使用的line-height / font-尺寸。

只需更改我的代码段的字体大小，您就会看到效果。我用0.75em来调整它。

.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>

Answer 2

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>

这可以通过jQuery这样实现，不知道确切的要求，但这可能是一个技巧，首先获取文本的大小，然后为img赋予相同的高度

Answer 3

在HTML中为height使用width和<img>属性，就可以从1px一直使用它，从我看到的图像来看，比一个正方形像素大得多，请在CSS中使用margin调整其位置！

希望这会有所帮助！：-）

Answer 4

使用图像作为背景，如下所示：

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>

使图像尊重font-size属性？

4 个答案: