时间戳

首页 > 解决方案 > 在卡片中制作图像填充空间

reactjs - 在卡片中制作图像填充空间

问题描述

我正在使用 react 和 reactstrap 制作网站，我有一张包含图像的卡片，卡片是正方形，图像是矩形，我希望图像以与要填充的图像相同的方式填充卡片屏幕的背景（裁剪边缘以适应，从而避免图像被拉伸）。

我尝试在高度为 100% 时将宽度设置为自动，但图像最终只会比正常尺寸小，但会从卡中溢出，而不是居中。

<Row ClassName="posts">
  <Col>
    <Card style={{ height:"460px", width:"460px"}}>
      <a href="#"><img className="img-fluid" src={media_picture} width="auto" height="100%"/></a>
    </Card>
  </Col>
  <Col>
    <Card style={{ height:"460px", width:"460px"}}>
      <a href="#"><img className="img-fluid" src={media_picture} width="auto" height="100%"/></a>
    </Card>
  </Col>
</Row>

我希望生成的图像包含在卡片中，居中并像背景图像一样填充。

标签： reactjsreactstrap

解决方案

您可能会受益于将NPMJS 中的 Bootstrap添加到您的项目中。然后，您可以使用文档中的基本样式。

您所要做的就是添加className="img-fluid"到您img的

<Row ClassName="posts">
  <Col>
    <Card style={{ height:"460px", width:"460px"}}>
      <a href="#"><img className="img-fluid" src={media_picture} width="auto" height="100%"/></a>
    </Card>
  </Col>
  <Col>
    <Card style={{ height:"460px", width:"460px"}}>
      <a href="#"><img className="img-fluid" src={media_picture} width="auto" height="100%"/></a>
    </Card>
  </Col>
</Row>

推荐阅读