CSS：缩放字体大小以适合父块元素高度 [英] CSS: Scale font-size to fit parent block element height

问题描述

几乎所有的问题和答案都涉及到视口大小的讨论；这不是我的问题。

接这支笔... https://codepen.io/njt1982/pen/pZjZNM

我有一个非常基本的Bootstrap 4网格，如下所示：

 < div class = container mt-4> 
< div class = row> 
< div class = col border>< div class = tile>< span> A< / span>< / div>< / div> 
< div class = col border>< div class = tile>< span> B< / span>< / div>< / div> 
 ... 
 ... 
< / div> 
< div class = row> 
< div class = col border>< div class = tile>< span> A< / span>< / div>< / div> 
< div class = col border>< div class = tile>< span> B< / span>< / div>< / div> 
 ... 
 ... 
< / div> 
 ... 
 ... 
< / div> 
  

和一些CSS将它们变成正方形（使用 padding-top： 100％技巧）：

  .col {
 padding：0; 
} 
 .col：not（：last-child）{
 border-right：none！important; 
} 
 .row：not（：last-child）.col {
 border-bottom：none！important; 
} 
 .tile {
 padding：100％0 0; 
 font-size：5vw; 
} 
 .tile span {
 position：absolute;剩余
：0； 
最高：50％； 
行高：0; 
宽度：100％； 
 text-align：center; 
} 
  

这里的问题是5vw使字体恰好适合我的2560px宽的视口，但是当我到达较低的断点时，它不再充满单元格。我想避免大量的媒体查询来调整它。

是否有仅CSS方式来表示 font-size = container_height？ p>

• 字体大小：100％似乎只是将字体设置为基本大小（而不是父级尺寸，例如您希望 height：100％做的那样）。有些像 em 's ...


• 我试过 vh ，直到视口高度发生变化（与vw相同的问题）之前，它都可以正常工作。


• 我阅读了一些有关vb的信息（关于父块），但似乎没有去工作？我相信这仍然只是理论上的。


• 我知道JS-options可以计算父级的高度并对其进行设置...但是我觉得这应该是CSS的东西能够做到，而我却错过了一个难题。


• 答案可能就在于变换吗？！还是 calc（）？

---

更新：使用SVG的可能答案？ https://stackoverflow.com/a/51333267/224707

解决方案

我发现的一种可能的解决方案是使用SVG。。。

https://codepen.io/njt1982/pen/EpVeYw

每个列变为

 < div class = col border> 
< div class = tile> 
< svg viewBox = 0 0 20 20> 
< text x = 50％ y = 14 text-anchor = middle> A< / text> 
< / svg> 
< / div> 
< / div> 
  

然后我们删除所有字体大小的概念，然后执行以下操作：

  .tile svg {
位置：绝对；剩余
：0； 
 top：0； 
行高：0; 
宽度：100％； 
身高：100％； 
 fill：＃333; 
} 
  

似乎可以很好地扩展-但是，我尚未通过浏览器对其进行测试。 ..

Almost every question and answer I have found talks about the viewport size; this isn't really my issues.

Take this Pen... https://codepen.io/njt1982/pen/pZjZNM

I have a very basic Bootstrap 4 grid like this:

<div class="container mt-4">
  <div class="row">
    <div class="col border"><div class="tile"><span>A</span></div></div>
    <div class="col border"><div class="tile"><span>B</span></div></div>
    ...
    ...
  </div>
  <div class="row">
    <div class="col border"><div class="tile"><span>A</span></div></div>
    <div class="col border"><div class="tile"><span>B</span></div></div>
    ...
    ...
  </div>
  ...
  ...
</div>

And some CSS to make these into squares (using the padding-top: 100% trick):

.col {
  padding: 0;
}
.col:not(:last-child) {
  border-right: none !important;
}
.row:not(:last-child) .col {
  border-bottom: none !important;
}
.tile {
  padding: 100% 0 0;
  font-size: 5vw;
}
.tile span {
  position: absolute;
  left: 0;
  top: 50%;
  line-height: 0;
  width: 100%;
  text-align: center;
}

The problem here is that 5vw makes the font just the right size on my 2560px wide viewport, but by the time I have reached the lower breakpoint, it not longer fills the cells. I'd like to avoid tonnes of media queries to "tune" it.

Is there any CSS-only way of saying "font-size = container_height"?

• font-size: 100% seems to just set the font to the base size (not the parent size, like you'd expect height: 100% to do). Some goes for the likes of em's...
• I've tried vh and that works fine until the viewport height changes (so same problem as vw).
• I read something about vb (about the parent block), but that doesn't seem to work? I believe it is still only theoretical.
• I am aware of JS-options which could calculate the height of a parent and set it... But I feel like this is something CSS should be able to do and I'm missing a piece of a puzzle.
• Could the answer lie in transforms?! or calc()?

---

UPDATE: Possible answer using SVGs? https://stackoverflow.com/a/51333267/224707

解决方案

One possible solution I have found is using SVG's...

https://codepen.io/njt1982/pen/EpVeYw

Each column becomes this:

<div class="col border">
  <div class="tile">
    <svg viewBox="0 0 20 20">
      <text x="50%" y="14" text-anchor="middle">A</text>
    </svg>
  </div>
</div>

Then we drop all notion of font-size and do this:

.tile svg {
  position: absolute;
  left: 0;
  top: 0;
  line-height: 0;
  width: 100%;
  height: 100%;
  fill: #333;
}

Seems to scale pretty well - I have not, however, browser tested it...

这篇关于CSS：缩放字体大小以适合父块元素高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！