css - 下一张图片 : Shrinking inside flexbox with tailwind

Question

我正在使用 NEXT Image 组件来适应 flexbox 而不收缩。但是，根据其他元素中的内容，它会不断缩小:

这是我的代码:

import React from 'react';
import Image from 'next/image';
type Props = {
  imageUrl?: string;
  senderName: string;
  newMessageCount?: number;
  latestMessage: string;
};

export default function MessageBox({
  imageUrl,
  senderName,
  newMessageCount,
  latestMessage,
}: Props) {
  const isNewMessageDefined = newMessageCount ? true : false;
  const newMsgValue =
    latestMessage.length > 80
      ? `${latestMessage.slice(0, 80)}...`
      : latestMessage;
  return (
    <div className='flex w-full gap-2' aria-label='Funfuse-Message-Container'>
      <Image
        alt='Message Image'
        src={imageUrl ?? '/funfuse/avatar-02.jpg'}
        className='rounded-full shadow-lg shrink-0 shadow-indigo-500/50'
        height={80}
        width={80}
        objectFit='cover'
        objectPosition='center'
      />
      <div className='flex flex-col'>
        <div
          aria-label='Funfuse-Message-Header'
          className='flex flex-row items-center gap-2'>
          <h2 className='text-xl text-black'>{senderName ?? 'John Doe'}</h2>
          {isNewMessageDefined && (
            <div className='h-[1.2rem] w-[1.2rem] rounded-full relative bg-funfuse'>
              <label className='absolute text-xs text-white transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2'>
                {newMessageCount}
              </label>
            </div>
          )}
        </div>
        <div aria-label='Funfuse-Message-Body'>
          <label className='text-sm font-semibold text-gray-400'>
            {newMsgValue}
          </label>
        </div>
      </div>
    </div>
  );
}

谁能帮我确定如何防止出现此问题，因为我一直希望我的图像大小合适且永不缩小。我尝试使用属性:flex-shrink: 0 但那也不起作用。

Answer 1

可能是因为默认Image标签中的layout属性是responsive的，在缩小父级的宽度的同时缩小了自身的尺寸。

设置layout fixed，使图片的宽度保持固定。在这里您可以阅读更多关于 next/image 的信息:https://nextjs.org/docs/api-reference/next/image

 return (
<div className='flex w-full gap-2' aria-label='Funfuse-Message-Container'>
  <Image
    alt='Message Image'
    src={imageUrl ?? '/funfuse/avatar-02.jpg'}
    className='rounded-full shadow-lg shrink-0 shadow-indigo-500/50'
    height={80}
    layout="fixed"
    width={80}
    objectFit='cover'
    objectPosition='center'
  />
  <div className='flex flex-col'>
    <div
      aria-label='Funfuse-Message-Header'
      className='flex flex-row items-center gap-2'>
      <h2 className='text-xl text-black'>{senderName ?? 'John Doe'}</h2>
      {isNewMessageDefined && (
        <div className='h-[1.2rem] w-[1.2rem] rounded-full relative bg-funfuse'>
          <label className='absolute text-xs text-white transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2'>
            {newMessageCount}
          </label>
        </div>
      )}
    </div>
    <div aria-label='Funfuse-Message-Body'>
      <label className='text-sm font-semibold text-gray-400'>
        {newMsgValue}
      </label>
    </div>
  </div>
</div>

);