以行高为宽度单位答案

【问题标题】：Take line height as unit for width以行高为宽度单位
【发布时间】：2012-10-20 03:44:43
【问题描述】：

编辑：我强调不希望任何东西都依赖固定尺寸。

我有一张想要与文本内联显示的图像。我想要图片

a) 是方形的，并且

b) 与文字一样高。

假设存在一个名为“H”的 CSS 单元，它等于一行的高度，就像“ex”等于“x”的高度一样。我希望能够编写这样的代码：

img.myclass {
    width: 1H;
    height: 1H;
}

如果没有这样的单位（准确地说，我想要一条基线到下一行基线的距离）那么我如何在没有 Javascript 的情况下实现填充方形图像的目标？

【问题讨论】：

标签： css

【解决方案1】：

显然有一个 lh 正在开发中：https://css-tricks.com/lh-and-rlh-units/

但是，在那之前……

您可以使用 CSS 自定义属性设置行高。比如：

* {
  line-height: var(--line-height);
}

.mydiv {
  --line-height: 1.37;
  font-size: 24px;
}

然后为了得到一条线的实际高度，你可以使用calc 将--line-height 乘以1em（或者任意多个 em 来获得你想要的线高度的倍数），例如：

.mydiv p {
  padding-left: calc(var(--line-height) * 1em);
}

主要的警告是，这仅在您对 --line-height 使用无单位值时才有效。

【讨论】：

【解决方案2】：

您可以选择一个固定的宽度/高度并将 line-height 和 img 宽度/高度设置为该恒定大小，或者您可以使用 javascript。在设置新的 CSS 属性时，无法引用另一个 CSS 属性，这似乎是您所希望的。

【讨论】：

【解决方案3】：

我可能看的不对……但你不能给线条一个特定的高度，然后设置图像以适应它吗？

<span style="display:inline-block;height:20px;">

Hello <img src="testtext.png" style="max-height:100%;" />

</span>

【讨论】：

【解决方案4】：

您可以在 ems 或 exs 中设置文本的字体大小和/或行高并且您可以对图像高度/宽度使用相同的度量。不过，如果您想使用变量设置它们，我可能会建议 LESSCSS

【讨论】：

【解决方案5】：

如果您将line-height 设置为特定值x 并将font-size 设置为特定值y，那么您知道行高将为：x * y。然后，您可以为任何给定数量的文本设置一个高度。

示例：font-size: 10px; line-height: 120%; 您的行高将为120% * 10px 或12px。如果您的文本块是 10 行，那么您知道它的高度为 120 像素。请参阅W3 line-height 和W3 font-size 了解更多信息。

注意：这是一种非常不精确的做事方式。从屏幕大小到最终用户浏览器上的自定义字体大小的任何内容都会引发这种情况。正如@Irongaze.com 所说，您在设置新设置时不能参考其他css设置。这最好在 javascript 中完成。

【讨论】：

或者简单地将 line-height 设置为 12px... :-)
@Irongaze.com stackoverflow.com/questions/10093218/… 这就是为什么这是一个坏主意。事实上，你可以让字体大小大于你的行高，这不适合他的目标。

【解决方案6】：

CSS 有一个line-height 属性，所以如果你将它设置为某个值，比如1.2 或120%，那么你就知道 em 与行高的比率是多少，你可以将它用作一个单位图片。

img.myclass {width:1.2em; height:1.2em}

但是请注意，默认情况下，图像与基线垂直对齐，而不是与行的底部对齐。另请参阅我在this answer 中的插图。

【讨论】：