以线宽为单位

编辑：我着重做不是想依靠固定尺寸为什么东西。以线宽为单位

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

一）为正方形，并且

B）是作为文本一样高。

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

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

看来，no such unit actually exists。我对吗？

如果没有这样的单位（谨慎地说，我希望从一条线上的基线到下一条线上的基线的距离），那么我该如何实现我的目标：在没有Javascript的情况下填充方形图像？

来源

2012-10-30 spraff

图像是否有平方比例或是否需要拉伸。 – Bruno

如果你不想依赖固定任何东西，并且想动态地做到这一点，你必须使用JavaScript或其他语言，可以在dom加载后触发，它知道文本的高度。 – Ryan

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

来源

2012-10-30 18:14:03

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

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

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

</span>

来源

2012-10-30 18:22:09

您可以在EMS或EXS 和文本的字体大小和/或行高，你可以使用同样的措施对于图像高度/宽度。但如果你想用一个变量来设置他们，我可能会建议LESSCSS

来源

2012-10-30 18:24:20 Robert

如果设置了line-height是一个特定的值x和你font-size为特定值y那么你知道，行高为：x * y。然后，您可以获得任意数量文本的高度。

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

注：这是一个做事的非常不精确的方式。任何从屏幕尺寸到最终用户浏览器上的自定义字体大小都会导致此问题。正如@ Irongaze.com所说的，当你设置一个新的设置时，你不能引用其他的css设置。这最好在JavaScript中完成。

来源

2012-10-30 18:27:29 Ryan

或简单地设置行高为12px ... :-) –

@ Irongaze.com http://stackoverflow.com/questions/10093218/css-line-height-smaller-than-font-size-results-in -odd-overflow-within-a-div这就是为什么这是一个糟糕的主意。实际上你可以使用比你的行高更大的字体大小，这对他所要做的事不起作用。 – Ryan

CSS有line-height属性，因此，如果您设置到一定值时，说1.2或120%，那么你知道什么是EM排队高度比，你可以使用作为图像的单元。

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

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

来源

2012-10-30 18:29:02

以线宽为单位

回答

相关问题