保持div的固定纵横比答案

【问题标题】：Keep fixed aspect ratio for div保持div的固定纵横比
【发布时间】：2020-08-16 00:01:31
【问题描述】：

我的 React 应用上有一个 CSS Grid。列的宽度已经正确。在这个网格的一个单元格中，我想添加一个<div>，它在拉伸（或缩短）单元格宽度的同时保持固定的纵横比；意思是，高度应该相应地改变。

注意：因为这个<div> 是可重用组件的一部分，所以我将<div> 的高度和宽度作为maxHeight 和maxWidth 的内联样式传递。即使 div 中没有内容，我也希望它能够工作，因为它是动画序列的一部分，我需要该空间是空的。

JS：

<div className="img-container" style={{maxHeight: props.dimensions.height, maxWidth: props.dimensions.width}}>  (content goes here)  </div>

然后我将 CSS 类应用到“img-container”以将宽度设置为 100%。还可以将背景设置为“红色”以查看它是否有效。

CSS：

.img-container { width: 100%; background: red; }

但是，可惜没有红色出现。我可以在开发工具中看到宽度有效，但是屏幕上没有红色，因为没有高度。有人能告诉我我可以做些什么来创建这个具有固定纵横比的红色背景的 div，它会向上或向下调整大小以适应网格单元格的宽度？

【问题讨论】：

标签： javascript html css reactjs

【解决方案1】：

您的div 标记结构指定不正确。你需要这样：

<div className="img-container" style={{maxHeight: props.dimensions.height, maxWidth: props.dimensions.width}}>  (content goes here)  </div>

【讨论】：

啊，是的，对不起。就是这样，我在堆栈溢出时打错了:(

【解决方案2】：

您可以通过添加具有最小宽度和最小高度的子 div 以保持纵横比来达到所需的结果。

<div className="img-container" style={...styles}>   
   <div className='inner-div'></div>
</div>

CSS

.inner-div {
   min-height: 200px;
   min-width: 200px; 
}

//change the above values according to your requirements.

【讨论】：

【解决方案3】：

找到答案了！

让我们处理我提供的示例，但要更改 JS 和 CSS，并包括一个内部 div 和 className 'img-inner' 作为示例。

JS：

让我们也插入 paddingTop 作为道具。

<div className="img-container" style={{maxHeight: props.dimensions.height, maxWidth: props.dimensions.width, paddingTop: `${props.dimensions.height/props.dimensions.width*100}%`}}>  (content goes here, e.g. a div with className="img-inner")  </div>

CSS：

.img-container { width: 100%, position: relative }

.img-inner { position: absolute, top: 0, bottom: 0, left: 0, right: 0 }

【讨论】：