Prevent image from increasing div size?

Question

I have an image on the left side, and text on the right. I want the div height to be determined by the text on the right (how long it is), and to crop the image on the left accordingly.

However, my div is currently catering to both div. If the image is long vertically, it will increase rather than crop. How can I prevent this?

The only thing I can think of is to set an exact height, but this doesn't work well responsively (image will be too small on some screen sizes)

<div class="flex bg-green-500 text-white">
  <div class="overflow-hidden block flex-shrink-0 w-1/3">
    <img class="h-full w-full object-cover" src="https://images.unsplash.com/photo-1526512340740-9217d0159da9?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dmVydGljYWx8ZW58MHx8MHx8&ixlib=rb-1.2.1&w=1000&q=80">
  </div>
  <div class="mx-2 flex flex-col justify-center">
    <h1>Long Title</h1>
    <h2>Some long sub text under the long title. Some long sub text under the long title. Some long sub text under the long title</h2>
  </div>
</div>

Related if not duplicate - https://stackoverflow.com/questions/34194042/one-flex-grid-item-sets-the-size-limit-for-siblings — Paulie_D, Oct 12 '21 at 09:10
@Paulie_D, using it doesn't work on images....at least from what I tried. Can you provide an example? — jordansmith, Oct 12 '21 at 16:25

score 0 · Answer 1 · answered Oct 12 '21 at 06:05

Are you using the cdn to get tailwind, or are you installing it? If installed, you can add the background to the tailwind.config.js, something like :

module.exports = {
  theme: {
      extend: {
        backgroundImage: {
          'image' : "url('https://images.unsplash.com/photo-1526512340740-9217d0159da9?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dmVydGljYWx8ZW58MHx8MHx8&ixlib=rb-1.2.1&w=1000&q=80')"
        }
    }
  }
}

Then you can add it as a background image, something like:

<div class="bg-image flex-shrink-0 w-1/3">

Prevent image from increasing div size?

1 Answers1