0

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

在小于768px两个的屏幕div上，应堆叠在另一个之上。我不想为 parent 设置高度div，因为我希望它适应 child 的内容div，因此我不能为持有图片%的孩子设置 a 作为高度。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>
4

1 回答 1

0

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

于 2021-08-16T13:20:36.620 回答