有文本按比例放大以适应容器 [英] Have text scale up in size to fit the container

问题描述

使用CSS，特别是没有onload javascript，可以这样做：

Using CSS, and specifically no onload javascript, would it be possible to do this:

你有一个150px宽，100px高的单元格。
它包含一个文本，例如：$ 20,00或其任何变体。

You have a cell of 150px wide and 100px in height. It contains a text, e.g.: $20,00 or any variant of that.

您希望它完全适合容器的大小。

You want it to perfectly fit the size of the container.

我可以用javascript来完成，大小文本，直到一个没有padding / margin的容器到达单元格的宽度和/或高度。

I'd be able to do it with javascript, size up the text until a container without padding/margin reaches the cell's width and/or height. Or contain it in something that has an overflow set to auto and see when it overflows or something.

可以使用纯CSS吗？

考虑到字体不是固定大小的字体。使用Arial如果你喜欢。

Take into account that the font isn't a fixed size font, either. Use Arial if you like.

推荐答案

有一件事，我做的是完美的，但可以得到完成的工作，在某些情况下要为小于X像素的屏幕尺寸使用@media规则，请将字体大小设置为较小或较大。

One thing that I have done that isnt perfect but can get the job done in some cases is to use a @media rule for screen sizes smaller then X pixels, set the font size smaller or larger.

h2{
  font-size:25px
}

@media screen and (max-width: 850px){/* for screens smaller then 850px, set the font size smaller */
   h2{
     font-size:19px;
   }
}

当然，这只会假设文本容器大小是以某种方式基于窗口大小。

Of course this would only work assuming the texts container size is based on the window size in some way.

这篇关于有文本按比例放大以适应容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！