Prevent image from increasing div size?-CodePudding

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>

CodePudding user response：

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

CodePudding user response：

Use em for this. It increases size according to the parent element. This would change the size of image accordingly with text on the right side.