我正在使用 Reactstrap,为了让某个 Card 响应窗口的大小,我想用百分比而不是像素来固定它的纵横比。
出于某种原因,这适用于宽度但不适用于高度。 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>
我应该使用其他方式来实现响应吗?
最佳答案
% 尺寸始终与当前元素的父容器相关。在这种情况下,您当前的元素是 Card,它的父元素是 ID 为 app 的 div,但它没有固定高度。您需要父容器的一些绝对值,然后您可以使其子元素具有其 % 维度。如果您修复 <div id="app">
高度到一定值,Card 会跟随。
至于您的问题,为什么它适用于宽度而不适用于高度?
除非您指定特定高度,否则 block 元素的高度取决于其内容。因此,在涉及高度的父元素和子元素之间存在反馈,并且说 height: 50% 不会产生明确定义的值,除非您通过为父元素提供特定高度来打破反馈循环。
就宽度而言,body
HTML 的默认宽度为 100% 并且它是 super 父元素,但它也没有定义高度,除非您指定它或添加扩展其高度的元素。
关于html - 在 Reactstrap 中更改卡片高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47838381/