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

Posted 2023-03-05

【中文标题】如何使用 React 和 CSS 调整卡片图像

【英文标题】：How to adjust a card image with React and CSS

【发布时间】：2022-01-21 02:29:22

【问题描述】：

我知道这可能是一个新手询问，但我不是很擅长 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;

我的成就：

【参考方案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>