预览图片是竖条型的时候的显示问题

来源：5-3 提升用户体验，让用户在上传前预览文件

慕粉3241233

2024-06-17

老师请问这种显示问题有什么解决方案。我的代码结构应该和老师演示的一样，当上传的图片是竖条型的时候会超出显示范围。

<div key={file?.id} className="w-56 h-56 flex justify-center items-center">
 {isImage?
     (<img
         src={URL.createObjectURL(file.data)}
         alt={file.name}
     />)
     : (
         <Image
             src="/unknown-file-types.png"
             alt="unknown"
             width={100}
             height={100}
         ></Image>
     )
 }
 </div>

图片描述