制作一个与div一样大的字母

Question

我很难按照我的意愿在 CSS 中做出具体的事情。 我的目标是创建一个字母（在本例中为字母 K），并使其与所在的 div 容器一样大。 这是代码片段：

我添加了一些进一步的代码，因为我想在它旁边添加文本。 添加的图片显示了我希望如何将 K 的顶部和底部放置在容器内。 （补充一点可能很重要，它位于旋转木马中）。对我来说，解决方案具有响应性非常重要。我会感谢每一个支持。

<div class="carousel-item active">
  <div class="container-fluid" style="background-color: #D65A31; height: max(40vh,30vw);">
    <div class="row h-100" style="line-height: 1;">
      <div class="col-4 d-flex flex-column justify-content-center">
        <span style="color: #2BB673; font-size: max(40vh,30vw);display: flex; text-align: center;">K</span>
      </div>
      <div class="col-8 d-flex flex-column justify-content-center">
        <div class="row">
          <div class="col">
            <p style="font-size: 7vw; z-index: 1; color: #EEEEEE;">Lorem.</p>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <p style="font-size: 3vw; opacity: 75%; color: #EEEEEE;">
              Lorem ipsum dolor sit amet, consetetur sadipscing elitr
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

我已经尝试过调整字母的大小，但它通常会破坏我想要的“布局”，并以不需要的方式扩大轮播尺寸。 K 根据需要与 div 接壤

Answer 1

不要与字体作斗争，而是使用其中“绘制”字母 K 的 png 图像文件。然后，您可以将

<img>

宽度和高度设置为 100% 以填充您的内容

<div>

。

.Container {
  background-color: #D65A31;
  width: 400px;
  height: 300px;

  padding: 0rem;
}

.Container img {
  width: 100%;
  height: 100%;
}

<div class="Container">
    <img src="https://upload.wikimedia.org/wikipedia/commons/b/b9/Latin_Letter_K_with_stroke.png" alt="K">
</div>