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

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

CodePudding user response：

If you can use flex this would be simplest of all in my opinion:

<div >
  <div >
    <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  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

CodePudding user response：

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 >
     <div >
      <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  style="background-image:url(https://via.placeholder.com/300x500)"></div>
    </div>

CodePudding user response：

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 >
      <div >
        <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 >
        <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 >
      <div >
        <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  style="background: url(https://via.placeholder.com/300x500)">
      </div>
    </div>

CodePudding user response：

You can stretch the image to cover whole parent and then use object-fit to adjust clipping:

<img >

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 >
  <div >
    <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 >
    <img  alt="dummy" src="https://via.placeholder.com/300x500" />
  </div>
</div>