在 Reactstrap 中更改卡片高度

Question

我正在使用 Reactstrap，为了使某个卡片响应窗口的大小，我想用百分比而不是像素来修复它的纵横比。

出于某种原因，这适用于宽度但不适用于高度。 https://codepen.io/anon/pen/xpwOGL

第一行是问题。如果我将高度设置为一个常数，比如说height:"200px"，它会200px很好。如果我更改宽度 %，它将更改宽度以匹配。但出于某种原因， height % 只是没有做任何事情。

<Card style={{width:"80%", height:"60%"}}> 
   <Row className="no-gutters" style={{position: "absolute"}}>
      <Col xs="auto">
        <button>
          Next image
        </button>
      </Col>
      <Col xs="auto">
        <button>
          Previous image
        </button>
      </Col>
    </Row>
 </Card>

有没有一种不同的方式可以让我做出这种响应？

Answer 1

% 维度总是在relation to the parent container当前元素中。在这种情况下，您当前的元素是 Card，其父元素是带有 id app 的 div，但它没有固定高度。You need to have some absolute value of the parent container，然后您可以使其子元素具有其 % 维度。如果您将高度固定为某个值，则卡片将随之而来。

至于您的查询，为什么它适用于宽度而不适用于高度？

除非您指定特定高度，否则块元素的高度取决于其内容。因此，在涉及高度的父子之间存在反馈并说 height: 50% 不会产生明确定义的值，除非您通过为父元素提供特定高度来打破反馈循环。

就宽度而言，bodyhtml 的默认宽度为100%，它是超父元素，但它也没有定义高度，除非您指定它或添加扩展其高度的元素。