Question 280631 in CSS Question posted in
Some basic documentation can be found here.

CSS – Text scaling with VH and VW value based on the width and height of the window

I have a responsive element with width and height that adapt to the browser window while maintaining the aspect ratio.
inside I have a text with VH units (viewport Height) and I would like it to always adapt to the resizing of the window so that it always remains proportionate.

My script works fine at vertical scaling but not at horizontal scaling.
can you help me?
Thank you.

here you can find my example:
JSFiddle example

HTML

<section>
  <div class="stagez" style="
        --r: 2000 / 2200;
        aspect-ratio: var(--r);
        width:min(90%, min(2200px, 90vh*(var(--r))));
    ">
    <div class="text_text">TEST</div>
  </div>
</section>

CSS

html, body {
  height: 100%;
}

section {
  width: 100%;
  height: 100%;
  display: block;
  margin:0px;
  padding:0px;

}

.stagez {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  background: linear-gradient(30deg, red 50%, transparent 50%), chocolate;
}


.text_text {
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-weight: 900;
  color: black;
  font-size: 10vh;
  line-height: 10vh;
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    thank you but, it only works when the Stage has square proportions but if I try with a horizontal rectangle the text doesn't adapt automatically. this is the example:

    html, body {
  height: 100%;
}

section {
  width: 100%;
  height: 100%;
  display: block;
  margin:0px;
  padding:0px;

}

.stagez {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  background: linear-gradient(30deg, red 50%, transparent 50%), chocolate;
}


.text_text {
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-weight: 900;
  color: black;
  font-size: 10vmin;
  line-height: 1vmin;
}
    <section>
  <div class="stagez" style="
        --r:4000 / 2200;
        aspect-ratio: var(--r);
        width:min(90%, min(2200px, 90vh*(var(--r))));
    ">
    <div class="text_text">TEST</div>
  </div>
</section>


  2. 0

    I think you can change the font-size to vmin, this will change the font-size based on the smaller length after comparing window’s width and height

    font-size: 10vmin;
line-height: 1;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search