Question

编辑：我强调不想要依赖任何的固定尺寸。

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

a）是正方形，

b）和文字一样高。

想象一下，存在一个名为“H”的CSS单位，它等于一条线的高度，就像“ex”等于“x”的高度一样。我希望能够编写这样的代码：

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

似乎是no such unit actually exists。我是对的吗？

如果没有这样的单位（事先说明，我希望从一条线上的基线到下一条线的基线），那么如何在不使用Javascript的情况下实现线条填充方形图像的目标？

Answer 1

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

但是，在那之前...

您可以使用 CSS 自定义属性设置行高。类似的东西：

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

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

然后为了得到一条线的实际高度，你用 --line-height 乘以 1em（或者使用 calc ，比如：

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

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

Answer 2

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

Answer 3

我可能没有看到这个......但是你不能只给这条线一个特定的高度，然后设置图像以适应它吗？

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

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

</span>

Answer 4

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

Answer 5

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

示例：x * y font-size: 10px;您的行高将为line-height: 120%;或120% * 10px。如果您的文本块是10行，那么您知道它的高度为120px。有关详细信息，请参阅W3 line-height和W3 font-size。

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

Answer 6

CSS具有line-height属性，因此如果您将其设置为某个值，例如1.2或120%，那么您就知道它与行高比的关系是什么，而您可以将其用作图像的单位。

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

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