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

How to make text on image change size with the image in a dynamically changing flex container? – Html

I have a flex container that changes width according to the resolution.
Inside it there is a div that has a relative width to it with flex items inside that also change relatively.

Some of these flex items are images with text positioned in different areas.

What units should I use for this text so that it will appear as it’s part of the image and changes together with the image?

* {
  padding: 0;
  margin: 0;
}

.flex_container {
  display: flex;
  flex-direction: flex-column;
  width: 50%;
}

.flex_image {
  position: relative;
  width: 80%;
}

.flex_image img {
  width: 100%;
}

.flex_image_text {
  position: absolute;
  bottom: 0;
}

.flex_image_text p {
  color: red;
  font-size: 5rem;
  font-weight: 700;
}
<div class="flex_container">
  <div class="flex_image">
    <img src="https://images.pexels.com/photos/1049298/pexels-photo-1049298.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1">
    <div class="flex_image_text">
      <p>
        Hello
      </p>
    </div>
  </div>
</div>

In this snippet you can see that when you resize the screen resolution, the text size doesn’t change because the units aren’t relative.

But what are the correct units that will make it look like it’s "part of the image"?

Tags:

4

Answers


  1. 0

    As your image is sized relatively you can size the font e.g. in relation to vw units too.

    * {
  padding: 0;
  margin: 0;
}

.flex_container {
  display: flex;
  flex-direction: flex-column;
  width: 50%;
}

.flex_image {
  position: relative;
  width: 80%;
}

.flex_image img {
  width: 100%;
}

.flex_image_text {
  position: absolute;
  bottom: 0;
}

.flex_image_text p {
  color: red;
  font-size: 5rem;
  font-size: 10vw;
  font-weight: 700;
}
    <div class="flex_container">
  <div class="flex_image">
    <img src="https://images.pexels.com/photos/1049298/pexels-photo-1049298.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1">
    <div class="flex_image_text">
      <p>
        Hello
      </p>
    </div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    If you just want your font size to skill with the image, try using vw instead of rem with your font size like so:

    .flex_image_text p {
  color: red;
  font-size: 5vw;
  font-weight: 700;
}

    vw directly correlates with your viewport’s size

    Login or Signup to reply.
  3. 0

    You can use something like this:

    font-size: calc((100vw - 320px) / ((1920 - 320) / (40 - 24)) + 24px);

    Where

    1920 is the max width and

    320 is the min width of the div;

    40 is the maximum font size;

    24 is the minimum font size;

    Login or Signup to reply.
  4. 0

    Following up on the comment thread with @a-haworth and @stackerito, here’s a solution that uses container query units.

    As the number of cards in a row changes from 1 to 2 to 3 as you resize the window, the text resizes appropriately relative to the width of the card.

    * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

ul {
    list-style: none;
    max-width: 900px;
    margin-inline: auto;
    padding-inline: 16px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 16px;
}

.card {
    container-type: inline-size;
}

figure {
    display: grid;
}

figure > * {
    grid-area: 1 / 1 / -1 / -1;
}

img {
    width: 100%;
}

figcaption {
    align-self: end;
    margin: 8px;
    font-size: 18cqi;
}
    <ul>
    <li>
        <div class="card">
            <figure>
                <img src="https://images.pexels.com/photos/1049298/pexels-photo-1049298.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1">
                <figcaption>Hello</figcaption>
            </figure>
        </div>
    </li>
    <li>
        <div class="card">
            <figure>
                <img src="https://images.pexels.com/photos/1049298/pexels-photo-1049298.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1">
                <figcaption>Hello</figcaption>
            </figure>
        </div>
    </li>
    <li>
        <div class="card">
            <figure>
                <img src="https://images.pexels.com/photos/1049298/pexels-photo-1049298.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1">
                <figcaption>Hello</figcaption>
            </figure>
        </div>
    </li>
    <li>
        <div class="card">
            <figure>
                <img src="https://images.pexels.com/photos/1049298/pexels-photo-1049298.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1">
                <figcaption>Hello</figcaption>
            </figure>
        </div>
    </li>
    <li>
        <div class="card">
            <figure>
                <img src="https://images.pexels.com/photos/1049298/pexels-photo-1049298.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1">
                <figcaption>Hello</figcaption>
            </figure>
        </div>
    </li>
</ul>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search