4

编辑：我强调不想依赖固定大小的任何东西。

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

a) 是正方形的，并且

b) 与文字一样高。

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

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

看来实际上不存在这样的单位。我对吗？

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

4

6 回答 6

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多少个 em 来获得你想要的线的高度的倍数）calc，例如：

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

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

于 2021-04-22T23:29:18.240 回答
0

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

于 2012-10-30T18:14:03.820 回答
0

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

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

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

</span>
于 2012-10-30T18:22:09.243 回答
0

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

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

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

于 2012-10-30T18:27:29.490 回答
0

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

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

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

于 2012-10-30T18:29:02.177 回答
0

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

于 2012-10-30T18:24:20.377 回答