Dynamic Image height adjustment in CSS based on content
Tags: website, uidesign, grid, css
Published: 2019-09-05 07:11:22

---
title: Dynamic Image height adjustment in CSS based on content
published: true
tags: website,UIdesign,Grid,CSS
canonical_url: https://saranraj.hashnode.dev/dynamic-image-height-adjustment-in-css-based-on-content-ck054ht17000882s12ed3xvp0
---

![Hero Banner with text content](https://cdn-images-1.medium.com/max/1024/1*DB7TZBkQBqixzUywOyubIA.png)<figcaption>Hero Banner with text content</figcaption>

Let say, we need an image and text content. The text has to overlay on the image. If the text content grows, the image height should also increase. The most common way of doing this is putting the image as a background-image in CSS.

Similar to this

```
.banner {
  background-image: url(‘path/to/img’);
}
```

But what if this is the Hero banner of the page, and the business requirement is to use the image tag instead of CSS background-image for SEO and accessibility reasons.

For this purpose, we can achieve the text container by making it’s position absolute and overlapped with the image. Similar to this

```
<div class=”banner”>
  <div class=”banner-content”>
    <h1>Lorem ipsum dolor sit amet, consectetur</h1>
  </div>
  <img class=”banner-image” src=”/path/to/img”/>
</div>
```

```
.banner {
  position: relative;
  width: 100%;
}

.banner-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.banner-image {
  width: 100%;
}
```

But what if the requirement is that if the banner content is growing, the image height should also increase and match the correct proportion. The above solution can’t solve this requirement, because we set the banner-content has `position: absolute`, and its position outside the DOM tree structure.

For achieving the above point we can write code in javascript and set the height of the image tag.

**How can we achieve this functionality without javascript?**

Here is the way, we can achieve this by using **CSS Grid** functionality. It is a two-dimensional grid-based layout system. Grid is the very first CSS module created specifically to solve the layout problems we’ve all been hacking our way around for as long as we’ve been making websites.

> In CSS Grid, we can give the `grid-area` and `grid-template-areas`. `grid-area` gives an item a name so that it can be referenced by a template created with the `grid-template-areas` property.

> `grid-template-areas` defines a grid template by referencing the names of the grid areas which are specified with the grid-area property. **_Repeating the name of a grid area causes the content to span those cells_**. The syntax itself provides a visualization of the structure of the grid.

Example:

```
header {
  grid-area: header;
}
main {
  grid-area: main;
}
aside {
  grid-area: aside;
}
footer {
  grid-area: footer;
}

body {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: auto;
  grid-template-areas: 
   “header header header”
   “main main aside”
   “footer footer footer”;
}
```

In the above you can see the `grid-template-columns` have three `100px` values, meaning it’ll create a three-column layout. In `grid-template-areas` shows the page layout, header and footer take full width, main takes 2/3 width and aside takes 1/3 width.

Similar to this we can achieve the same in image and text overlapping.

Example:

```
<div class=”hero_container”>
  <div class=”hero_image”>
    <img src=”path/to/image”>
  </div>
  <div class=”hero_text”> 
    <h2>Hero Text</h2>
    <p>Lorem ipsum dolor sit</p>
  </div>
</div>
```
```
.hero_container {
  display: grid;
  grid-template-areas: “overlap-content”;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero_image {
  grid-area: overlap-content;
}

.hero_text {
  grid-area: overlap-content;
}
```

In the above example, the `grid-template-areas` value is a single name. The same name is used in both image and text. So, the content on each divs will overlap each other. We give image width and height 100%, so it’ll occupy the full-screen width. For this overlapping, if the hero text content increases, the image height also increases as well.

![Hero Banner with more text content](https://cdn-images-1.medium.com/max/1024/1*07mPMFHCVWM3hath76WB2A.png)<figcaption>Hero Banner with more text content</figcaption>

Tada! 👋

Here we can achieve the dynamic height adjusting functionality on the image based on content using pure CSS, without javascript at all.

Here is the [demo](https://codepen.io/saranraj/pen/BaBLMOj).

Thanks for reading. I published this same on [hashnode](https://saranraj.hashnode.dev/dynamic-image-height-adjustment-in-css-based-on-content-ck054ht17000882s12ed3xvp0) and [medium](https://medium.com/@saranraj_sekar/dynamic-image-height-adjustment-in-css-based-on-content-87b670ada56c) too.

Suggestions and comments are welcome 🙏