# How to make hero image shrink to text block size

**URL:** <https://forum.bricksbuilder.io/t/how-to-make-hero-image-shrink-to-text-block-size/23046>\
**Category:** How To\
**Tags:** how-to\
**Created:** [May 27, 2024, 9:25am UTC](https://forum.bricksbuilder.io/t/how-to-make-hero-image-shrink-to-text-block-size/23046 "2024-05-27T09:25:04Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![patrick\_adversum](https://forum.bricksbuilder.io/letter_avatar_proxy/v4/letter/p/53a042/32.png) [@patrick\_adversum](https://forum.bricksbuilder.io/u/patrick_adversum)\
**Post date:** [May 27, 2024, 9:25am UTC](https://forum.bricksbuilder.io/t/how-to-make-hero-image-shrink-to-text-block-size/23046/1 "2024-05-27T09:25:04Z")

</div>

I feel like this is the easiest thing to fix and I just don’t see it for some reason.

I have a standard hero section (flex or grid, could be either) 50 50 split - left side: block with h1, text, cta-btn; right side: block with image.  
I would like the image to change it’s height depending on the height of the left block containing the text. So basically achieve the behaviour a background image on the right block would have but with an actual img.

Can’t get it to work, pls help

TYVM in advance ~patrick

---

<div class="post-metadata">

**Author:** ![Illarion](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/illarion/32/13866_2.png) [@Illarion](https://forum.bricksbuilder.io/u/Illarion)\
**Post date:** [May 27, 2024, 10:02am UTC](https://forum.bricksbuilder.io/t/how-to-make-hero-image-shrink-to-text-block-size/23046/2 "2024-05-27T10:02:26Z")

</div>

Stretch blocks in container (align-items, I think) and give image 100% height

---

<div class="post-metadata">

**Author:** ![patrick\_adversum](https://forum.bricksbuilder.io/letter_avatar_proxy/v4/letter/p/53a042/32.png) [@patrick\_adversum](https://forum.bricksbuilder.io/u/patrick_adversum)\
**Post date:** [May 27, 2024, 11:22am UTC](https://forum.bricksbuilder.io/t/how-to-make-hero-image-shrink-to-text-block-size/23046/3 "2024-05-27T11:22:29Z")

</div>

That’s what I tried without any success. The media wrapper (block) always assumes the size of the image inside.

---

<div class="post-metadata">

**Author:** ![Illarion](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/illarion/32/13866_2.png) [@Illarion](https://forum.bricksbuilder.io/u/Illarion)\
**Post date:** [May 27, 2024, 1:00pm UTC](https://forum.bricksbuilder.io/t/how-to-make-hero-image-shrink-to-text-block-size/23046/4 "2024-05-27T13:00:44Z")

</div>

Maybe set the media wrapper height to 100%?

---

<div class="post-metadata">

**Author:** ![patrick\_adversum](https://forum.bricksbuilder.io/letter_avatar_proxy/v4/letter/p/53a042/32.png) [@patrick\_adversum](https://forum.bricksbuilder.io/u/patrick_adversum)\
**Post date:** [May 27, 2024, 2:54pm UTC](https://forum.bricksbuilder.io/t/how-to-make-hero-image-shrink-to-text-block-size/23046/5 "2024-05-27T14:54:56Z")

</div>

Still no change 😫 it’s so weird