我不知道如何让带有图像的div遵守父div的高度约束

Question

我正在尝试将图像放入具有动态高度的div中。如图所示，文字说明的高度是静态的，但我不知道如何将图像放在里面。

解决方案不应使用百分比来指定div的高度(例如，10%和90%(

此外，正如片段中所指出的，我需要完整的图像内容。无overflow: hidden;

const {useState} = React;
const App = ({}) => {
const [height, setHeight] = useState(100);
return (
<div>
<div>
<div>
<input onChange={e=>setHeight(e.target.value)} value={height}/>
<div style={{ height: height + "px", border: "1px solid red" }}>
<div>[TEXT CAPTION] Scale image to fit within the border. (<b>not</b> <code>overflow:hidden;</code>)</div>
<img src="https://i.ibb.co/bLrJmN3/3.png" />
</div>
</div>       
</div>
</div>
);
};
// Render it
ReactDOM.render(
<App />,
document.getElementById("react")
);

.App {
font-family: sans-serif;
text-align: center;
}
.grid-container {
display: grid;
grid-template-rows: 20px;
height: 100px;
}
.grid-container > div {
border: 1px solid black;
background: green;
text-align: center;
font-size: 12px;
object-fit: contain;
}
img {
object-fit: contain;
max-height: 100%;
height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Answer 1

我读过你的问题，所以在我看来，你希望你的图像像父div一样在div中自动调整。如果你想你的图像在div或网格中自动调整，请使用这个属性object-fit: cover;

这是我试过的代码，它现在运行良好

.grid-container > div {
border: 1px solid black;
background-color: green;
text-align: center;
font-size: 12px;
object-fit: cover;
}
img {
max-height: 100%;
height: 100%;
display: block;
}

如果你有任何问题，请描述一下，这样很容易理解。

Answer 2

只需根据标题的静态大小调整高度偏移即可。假设标题是10px，那么您可以：

img {
max-height: calc(100% - 10px);
height: 100%;
}

Answer 3

如果我理解这个问题，你可以在grid-template-rows中添加第二个参数来计算第二行calc(100% - 20px)的高度

const {useState} = React;
const App = ({}) => {
const [height, setHeight] = useState(100);
return (
<div>
<div>
<div>
<input onChange={e=>setHeight(e.target.value)} value={height}/>
<div className="grid-container" style={{ height: height + "px" }}>
<div>[TEXT CAPTION] Scale image to fit within the border. (<b>not</b> <code>overflow:hidden;</code>)</div>
<img src="https://i.ibb.co/bLrJmN3/3.png" />
</div>
</div>       
</div>
</div>
);
};
// Render it
ReactDOM.render(
<App />,
document.getElementById("react")
);

.App {
font-family: sans-serif;
text-align: center;
}
.grid-container {
display: grid;
grid-template-rows: 20px calc(100% - 20px);
height: 100px;
border: 1px solid red;
}
.grid-container > div {
border: 1px solid black;
background: green;
text-align: center;
font-size: 12px;
object-fit: contain;
}
img {
object-fit: contain;
max-height: 100%;
height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>