如何使用 React 和 CSS 调整卡片图像答案

【问题标题】：How to adjust a card image with React and CSS如何使用 React 和 CSS 调整卡片图像
【发布时间】：2023-03-08 08:59:01
【问题描述】：

我知道这可能是一个新手询问，但我不是很擅长 CSS，所以我希望能提供一些关于如何实现我的目标的提示。

我正在尝试为 NFT 创建一个类似于下图的卡片相册：

相反，我的代码得到的是显示在标题、描述、价格和按钮上的图像。如何解决这个问题？

JSX 文件：

return (
    <>
      <div className="img-grid">
        {nfts.map((nft, i) => (
          <div key={i} className="img-wrap">
            <img src={nft.image} />
            <div>
              <p>{nft.name}</p>
              <div>{nft.description}</div>
            </div>
            <div>
              <p>{nft.price}</p>
              <button onClick={() => buyNft(nft)}>buy</button>
            </div>
          </div>
        ))}
      </div>
    </>
  );

CSS 文件：

.img-grid {
  /* width: 80%; */
  margin: 1px auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 50px;
}

.img-wrap {
  overflow: hidden;
  height: 0;
  padding: 50% 0;
  /* padding controls height, will always be perfectly square regardless of width */
  position: relative;
  /* opacity: 0.8; */
}

.img-wrap img {
  min-width: 100%;
  min-height: 100%;
  max-width: 150%;
  position: absolute;
  top: 0;
  left: 0;
}

我的成就：

【问题讨论】：

标签： javascript html css reactjs

【解决方案1】：

尝试将图像包装器和段落分开放置

<div className="img-grid">
  {nfts.map((nft, i) => (
    <div key={i}>
      <div className="img-wrap">
        <img src={nft.image} />
      </div>
      <div>
        <p>{nft.name}</p>
        <div>{nft.description}</div>
      </div>
      <div>
        <p>{nft.price}</p>
        <button onClick={() => buyNft(nft)}>buy</button>
      </div>
    </div>
  ))}
</div>

【讨论】：