Html Question posted in
Some basic documentation can be found here.

Html – Make a letter as big as the div

I’m having difficulties make the concrete thing in CSS as I wish.
My goal is to create a Letter in this case the letter K and make it as big as the div container it is in.
Here is the code snippet:

I included some further code because I want to then include text next to it.
The picture added shows how I would want the K to be placed with the top and bottom just inside the container. (it may be important to add that it’s in located in a carousel). It would be important to me that the solution is responsive. I would appreciate every support.

<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>

I already tried adjusting the size of the letter, but it usually destroyed the "layout" I had in mind and expanded the carousels size in an unwanted way. K bordering the div as wanted

Tags:

2

Answers


  1. 0

    Instead of fighting with a font, use a png image file with the letter K "drawn" in it. You can then set <img> width and height to 100% to fill your containing <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>
    Login or Signup to reply.
  2. 0

    Essentially, what you want is the text-box property (longhands: text-box-trim and text-box-edge) but for now only Safari supports it. (Coming soon to Chrome, and hopefully others in the not too distant future.)

    You would use it as

    text-box: trim-both cap alphabetic;

    In your case you’d also need to replace the display:flex on the span with display:block

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search