Question

我正在使用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>

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

Answer 1

首先请确保没有任何填充

func pagerView(_ pagerView: FSPagerView, didSelectItemAt index: Int)

然后将位置设为绝对

padding:0

Answer 2

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

您要做的就是将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>

使卡片内的图像充满空间

2 个答案: