Ant Design：有没有办法设置我的卡片封面图像自动适应可用的space？

Question

我正在使用 Ant Design。我想让我的名片封面图片自动调整大小并填充容器，但我做不到。

这是我正在努力实现的示例。

This is what I have

This is what I am trying to achieve.

我现在使用的代码：

<Card
  hoverable={true}
  size="small"
  style={{ width: '200px', backgroundColor: 'transparent'}}
  cover={<img alt="images" src={data && data.image} style={imageStyle}/>}
  onClick={() => handleCardClick(data) }
  bordered={false}
></Card>

我尝试了多种方法来解决这个问题，例如将 CSS 添加到图像元素本身。却没有得到满意的结果。

const imageStyle = {
// height: '100%',
backgroundSize: 'cover',
borderRadius: '5px',
backgroundRepeat: 'no-repeat',
backgroundPosition: '50%' }

我发现，and-design 将图像元素包裹在 ant-card-cover class 中，我不确定这是否是罪魁祸首，但我认为此分区不会相应地调整大小。这只是我的猜测。如果我在某处有误或遗漏了什么，请纠正我。

Answer 1

我想你问的是 XY 问题。

您问的是如何使图像适合卡片中可用的 space。但是，Antd 已经通过将图像大小调整到卡片边界内同时尊重图像的纵横比来做到这一点。

您真正要问的是手动设置卡片封面的高度，并通过放大图像并仅显示其一部分（由于宽高比与覆盖容器和图像）。

<Card
  hoverable
  style={{ width: 240 }}
  cover={
    <div style={{ overflow: "hidden", height: "600px" }}>
      <img
        alt="example"
        style={{ height: "100%" }}
        src="https://s3.amazonaws.com/thumbnails.venngage.com/template/a8897941-0545-4eaa-a427-76503a01b7e7.png"
      />
    </div>
  }
>
  <Meta title="Europe Street beat" description="www.instagram.com" />
</Card>

DEMO

Ant Design：有没有办法设置我的卡片封面图像自动适应可用的space？

Ant Design: Is there anyway to set my card cover image to automatically fit the available space?

html

css

antd