How to make image responsive in columns grid with TailwindCSS - css

Question

I have an 8 columns grid, in which I want to distribute content, text and an image, as follows:
<div className="grid grid-cols-8 gap-4">
<div className="col-start-2 col-end-5">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad
tempora perferendis tenetur quia vitae blanditiis, excepturi quo
inventore. Molestias cum eaque natus sequi nisi ea, dolor atque
at? Fuga ipsa unde consectetur nobis consequatur tempore
asperiores, quos alias similique, rerum nemo illo qui quidem
accusantium molestiae voluptates deleniti praesentium sint?
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum
obcaecati accusamus quam eius doloremque. Error dignissimos modi
eveniet at. Voluptate, sed ea. Eius veniam odit voluptatem error
commodi amet repudiandae ut ab quos. Reiciendis officia placeat
harum nulla obcaecati magni accusantium dolorem architecto ullam,
ratione cumque distinctio consectetur esse deleniti.
</p>
</div>
<div className="col-start-6 col-end-8">
<img alt="dummy" src="https://via.placeholder.com/300x500" />
</div>
</div>
The code above produces this result on a 1200px screen:
And this one on an 800px screen:
How can I have the image responsive, and get its height adapt to the text content on the left, so the vertical side of the image always takes the height of the text regardless of screen-size?
Tailwind-play

Answer 1

If you can use flex this would be simplest of all in my opinion:
<div class="flex">
<div class="mr-8 w-8/12">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad tempora perferendis tenetur quia vitae blanditiis, excepturi quo inventore. Molestias cum eaque natus sequi nisi ea, dolor atque at? Fuga ipsa unde consectetur nobis consequatur tempore asperiores, quos alias similique, rerum nemo illo qui quidem accusantium molestiae voluptates deleniti praesentium sint?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum obcaecati accusamus quam eius doloremque. Error dignissimos modi eveniet at. Voluptate, sed ea. Eius veniam odit voluptatem error commodi amet repudiandae ut ab quos. Reiciendis officia placeat harum nulla obcaecati magni accusantium dolorem architecto ullam, ratione cumque distinctio consectetur esse deleniti.</p>
</div>
<div class="w-4/12 bg-cover bg-center" style="background-image:url(https://via.placeholder.com/300x500)"></div>
</div>
tailwind play
Note: Width uses standard 2, 3, 4, 5, 6, 12 columns there is no 8 columns

Answer 2

The easiest(I think) would just be to set the second column to have a background image instead of an image inside, such as:
<div class="grid grid-cols-8 gap-4">
<div class="col-start-2 col-end-5">
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad tempora perferendis tenetur quia vitae blanditiis,
excepturi quo inventore. Molestias cum eaque natus sequi nisi ea, dolor atque at? Fuga ipsa unde consectetur nobis
consequatur tempore asperiores, quos alias similique, rerum nemo illo qui quidem accusantium molestiae voluptates
deleniti praesentium sint? </p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum obcaecati accusamus quam eius doloremque. Error
dignissimos modi eveniet at. Voluptate, sed ea. Eius veniam odit voluptatem error commodi amet repudiandae ut ab
quos. Reiciendis officia placeat harum nulla obcaecati magni accusantium dolorem architecto ullam, ratione cumque
distinctio consectetur esse deleniti. </p>
</div>
<div class="col-start-6 col-end-8 bg-center bg-cover" style="background-image:url(https://via.placeholder.com/300x500)"></div>
</div>

Answer 3

If you don't care about the aspect-ratio of the image then you can always use flex.
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>
<div class="grid grid-cols-8 gap-4">
<div class="col-start-2 col-end-5">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad tempora perferendis tenetur quia vitae blanditiis, excepturi quo inventore. Molestias cum eaque natus sequi nisi ea, dolor atque at? Fuga ipsa unde consectetur nobis consequatur tempore asperiores, quos alias similique, rerum nemo illo qui quidem accusantium molestiae voluptates deleniti praesentium sint?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum obcaecati accusamus quam eius doloremque. Error dignissimos modi eveniet at. Voluptate, sed ea. Eius veniam odit voluptatem error commodi amet repudiandae ut ab quos. Reiciendis officia placeat harum nulla obcaecati magni accusantium dolorem architecto ullam, ratione cumque distinctio consectetur esse deleniti.</p>
</div>
<div class="flex col-start-6 col-end-8">
<img alt="dummy" className="" src="https://via.placeholder.com/300x500" />
</div>
</div>
Or if you do care about the aspect-ratio and don't care if the image gets cropped then you can set it as a background in the second div.
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>
<div class="grid grid-cols-8 gap-4">
<div class="col-start-2 col-end-5">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad tempora perferendis tenetur quia vitae blanditiis, excepturi quo inventore. Molestias cum eaque natus sequi nisi ea, dolor atque at? Fuga ipsa unde consectetur nobis consequatur tempore asperiores, quos alias similique, rerum nemo illo qui quidem accusantium molestiae voluptates deleniti praesentium sint?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum obcaecati accusamus quam eius doloremque. Error dignissimos modi eveniet at. Voluptate, sed ea. Eius veniam odit voluptatem error commodi amet repudiandae ut ab quos. Reiciendis officia placeat harum nulla obcaecati magni accusantium dolorem architecto ullam, ratione cumque distinctio consectetur esse deleniti.</p>
</div>
<div class="flex col-start-6 col-end-8" style="background: url(https://via.placeholder.com/300x500)">
</div>
</div>

Answer 4

You can stretch the image to cover whole parent and then use object-fit to adjust clipping:
<img class="h-full w-full object-cover">
This will crop sides and show largest possible area, object-contain will show full image. No object-* or object-fill will deform it.
<script src="https://cdn.tailwindcss.com/"></script>
<div class="grid grid-cols-8 gap-4">
<div class="col-start-2 col-end-5">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad tempora perferendis tenetur quia vitae blanditiis, excepturi quo inventore. Molestias cum eaque natus sequi nisi ea, dolor atque at? Fuga ipsa unde consectetur nobis consequatur tempore asperiores,
quos alias similique, rerum nemo illo qui quidem accusantium molestiae voluptates deleniti praesentium sint?
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum obcaecati accusamus quam eius doloremque. Error dignissimos modi eveniet at. Voluptate, sed ea. Eius veniam odit voluptatem error commodi amet repudiandae ut ab quos. Reiciendis officia
placeat harum nulla obcaecati magni accusantium dolorem architecto ullam, ratione cumque distinctio consectetur esse deleniti.
</p>
</div>
<div class="relative col-start-6 col-end-8">
<img class="absolute h-full w-full object-cover" alt="dummy" src="https://via.placeholder.com/300x500" />
</div>
</div>