CODEWITHSUNDEEP
next.jstailwind-cssnextjs-image
quilmes
quilmes

Reputation: 43

Set next/height full

I have a parent div holding two child div (on with a pic, the other one with text). On screens larger than 768px, the two div are displayed next to each other and the div holding the image will take the whole height defined by the content of the other div. This is working as both child div have a set with: 50%.

On screens smaller than 768px the two div should be stacked on on top of the other. I don't want to set a height for the parent div, as I'd like it to adapt to the content of the child div, and therefore I can't set a % as height for the child div holding the picture. If I set a value in px for the div holding the picture, it won't stretch to the whole length on larger screen.

<div className='bg-cyan md:flex md:pb-4'>
   <div className={`relative md:w-${imgWidth}`}>
      <Image src={image} alt='' layout='fill' className='object-cover'/>
   </div>
      <div className='md:w-1/2 flex flex-col justify-evenly font-black'>
        <h1 className='font-sans-bold text-6xl mb-6'><span className='text-white'>...</h1>
        <p>...</p>
     </div>
 </div>

Upvotes: 0

Views: 140

Answers (1)

Hashim pk
Hashim pk

Reputation: 359

Try objectFit="cover" as a prop to Image component

<div className='bg-cyan md:flex md:pb-4'>
   <div className={`relative md:w-${imgWidth}`}>
      <Image src={image} alt='' layout='fill' objectFit='cover'/>
   </div>
      <div className='md:w-1/2 flex flex-col justify-evenly font-black'>
        <h1 className='font-sans-bold text-6xl mb-6'><span className='text-white'>...</h1>
        <p>...</p>
     </div>
 </div>

Ref: https://nextjs.org/docs/api-reference/next/image#layout

Upvotes: 1

Related Questions