设置下一个/高度满

Posted 2023-03-06

【中文标题】设置下一个/高度满

【英文标题】：Set next/height full

【发布时间】：2021-10-17 21:25:33

【问题描述】：

我有一个父母div 抱着两个孩子div（有图片，另一个有文字）。在大于768px 的屏幕上，两个div 并排显示，而持有image 的div 将占据另一个div 的内容定义的整个高度。这是因为两个孩子div 都有一组with: 50%。

在小于768px 的屏幕上，两个div 应该堆叠在另一个之上。我不想为父母div 设置高度，因为我希望它适应孩子div 的内容，因此我不能将% 设置为孩子的高度div拿着图片。如果我在px 中为持有图片的div 设置一个值，它不会在大屏幕上拉伸到整个长度。

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

【参考方案1】：

尝试 objectFit="cover" 作为 Image 组件的道具

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

参考：https://nextjs.org/docs/api-reference/next/image#layout