Nextjs图像组件并使用CSS设置宽度和高度

0yg35tkg 于 2023-01-17 发布在其他

关注(0)|答案(2)|浏览(281)

我使用Next.js附带的Image组件，但它迫使我将宽度和高度设置为值。我使用Tailwind CSS并使用它们的实用程序类来设置高度和宽度。

<Image
      src={imageSrc}
      alt={name}
      className="object-cover object-center"
      layout="fill"
/>

有效的HTML CSS代码是

<img
    className="w-auto h-6 lg:block"
    src="/img/logo-dark.png"
    alt="nftHODL.club Logo"
/>

next.js

来源：https://stackoverflow.com/questions/69048002/nextjs-image-component-and-setting-width-and-height-with-css

2条答案

按热度按时间

oyt4ldly1#

添加一个包含size和relative类的 Package 器div，然后在Image组件上设置layout="fill"，就可以实现这个目的。
示例：

<div className="h-64 w-96 relative"> // "relative" is required; adjust sizes to your liking
  <Image
    src={img.img}
    alt="Picture of the author"
    layout="fill" // required
    objectFit="cover" // change to suit your needs
    className="rounded-full" // just an example
  />
</div>

来源：https://techinplanet.com/how-to-use-tailwind-css-with-next-js-image/

赞(0）回复(0）举报 2023-01-17

dhxwm5r42#

如果图像不是从Web源加载的（因此在创建捆绑包时就知道其大小），那么这样做会更简单：

import YourImage from '../your/assets/image.png'
import styles from '../your/image.module.css'

<Image
  src={YourImage}
  alt='This is an image'
  className={styles.image}
/>

并在CSS文件中指定大小和其他属性。

赞(0）回复(0）举报 2023-01-17

我来回答

Nextjs图像组件并使用CSS设置宽度和高度

2条答案

相关问题

热门标签

最新问答