Responsive text based on image size
Tags: html, css, webdev, beginners
Published: 2021-03-08 09:59:14

<sup>**Find out more CSS tricks at [css-tip.com](https://css-tip.com)**</sup>

We all face such a requirement where we need to make a title below (or above) an image to not exceed the width of the image. In most of the cases, we need them to have the same width.

The common solutions are:

* Make the width of the title the same as the image: not a dynamic solution since we have to manually adjust the width each time we use a different image ❌
* Manually insert line break inside the title: Nah! a very bad idea ❌
* Make the title `position:absolute` to be able to use `width:100%` which will refer to a container that has the size of the image ... too complicated and it will make our text out of the flow ❌

Here is an easy solution to solve this task. No hardcoding width, no out of flow content and only few line of CSS:

```html 
<div class="box">
   <img>
   <h1>Lorem ipsum dolor ..</h1>
</div>
```

```css
.box {
  display: inline-block;
}
h1 {
  width: 0;
  min-width: 100%;
}
```

#### Yes, that's it!

This trick relies on two things:

1. We make the container (the `box` element) a *shrink-to-fit* element (its width is defined by its content). I used `inline-block` but it can be a float element, a `table` one, a flex item, etc.
2. We make our title have a `width` equal to `0` so it will not contribute to the container width. Our container will have its width defined **only** by the image. We add `min-width: 100%` to resize our title and make its width equal to the container width (the one defined previously with the image!). Yes, it's a bit crazy or let's say magic 😉

## Some working examples

{% codepen https://codepen.io/t_afif/pen/zYJXvRq %}

In all the above examples, the image will dictate the width of the title.

----

This trick is not only limited to image + title. It can work with any kind of configuration where we want an element A to define the width of an element B

## The title defines the width of the image

{% codepen https://codepen.io/t_afif/pen/KKxYdQj %}

## The title defines the width of a paragraph

{% codepen https://codepen.io/t_afif/pen/oNPOjqw %}

I think everyone got the idea. There is no restriction and any kind of element (even one with complex content) can be considered for this trick.

----

We can extend the same logic to a column configuration to have one column defining the height of another one. This time we will rely on `height:0; min-height:100%`. 

This one is a bit tricky since the usage or percentage height is not trivial (we all know the prophecy that says: "the parent needs to have an explicit height defined")

To overcome this, I will consider a CSS grid configuration where I don't need any explicit height.

Below, the left column is defining the size of the right one. The latter will get a scrollbar when its content exceeded the defined height.

{% codepen https://codepen.io/t_afif/pen/KKxYdoj %}


From [the specification](https://www.w3.org/TR/css-grid-1/#algo-overview) we can read:

>Once the size of each grid area is thus established, the grid items are laid out into their respective containing blocks. The grid area's width and height **are considered definite** for this purpose.

A grid item can safely use `height:100%` inside its grid area and that grid area will have its height defined based on the content and since one of them is having `height:0`, it will not contribute to that height (yes, the same magic as above 😉)

Flexbox can also be used here but we need an extra wrapper for the element that will use `height:0;height:100%`

{% codepen https://codepen.io/t_afif/pen/JjaVYvE %}

We need the extra wrapper because we will rely on the stretch alignment of flex items to have our defined size that will be used as a reference for the percentage.

From [the specification](https://www.w3.org/TR/css-flexbox-1/#algo-stretch):

>If the flex item has align-self: stretch, redo layout for its contents, treating this used size as **its definite** cross size so that **percentage-sized children can be resolved**.

One element will define the height of the parent, the other will get stretched by default to that height and the content inside will get sized to the same height.

Now, you have a *magic* trick to avoid unwanted overflow and keep elements equal in size even if they have different content.


----

### Some StackOverflow posts where I am using this trick:

[How to match width of text to width of dynamically sized image/title?](https://stackoverflow.com/q/55040250/8620333)

[How can you set the height of an outer div to always be equal to a particular inner div?](https://stackoverflow.com/q/48943233/8620333)

----

### <center>You want to support me?</center>

[![buy me a coffee](https://cdn.buymeacoffee.com/buttons/default-orange.png)](https://www.buymeacoffee.com/afif)

### <center> OR </center>

[![Become a patron](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/db3jtgy2i5l4w8slkps5.png)](https://www.patreon.com/temani)