Javascript 保持div的固定纵横比

我的React应用程序上有一个CSS网格。列的宽度已经正确。在这个网格的一个单元格中，我想添加一个

，它在延伸（或缩短）单元格宽度的同时保持固定的纵横比；也就是说，高度应该相应地改变

注意：由于此

是可重用组件的一部分，因此我将

的高度和宽度作为maxHeight和maxWidth的内联样式传入。即使div中没有内容，我也希望它能工作，因为它是动画序列的一部分，我需要那个空间是空的

JS:

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

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

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

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

---

但遗憾的是，没有出现红色。我可以在dev工具中看到宽度可以工作，但是屏幕上没有红色，因为没有高度。有人能告诉我如何创建具有固定纵横比的红色背景的div，该div将向上或向下调整大小，以适应网格单元格的宽度吗？

您的

div

标记结构指定错误。你需要这样：

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

（内容在这里）

找到了答案

让我们来处理我提供的示例，但是要改变JS和CSS本身，还包括一个内部

div

，类名为“img-inner”

JS:

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

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

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

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

让我们也插入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>

---

通过添加具有最小宽度和最小高度的子div以保持纵横比，可以获得所需的结果

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

---

啊，是的，对不起。就是这样，我在堆栈溢出上输入错误：(