html - 在固定的 div 大小内安装带有文本的图像

Question

我想我的问题可以通过一些基本的 CSS 来解决，但我似乎无法让它发挥作用。我只是有一个更大的图像，下面有文字。我希望它们适合/缩放到带有边框的 div 的固定大小，但是我希望它以我可以更改 div 大小的方式响应，并且它仍然会适本地调整。我的问题是图像将文本推到我的边框 div 之外。有什么帮助吗？例如，我有一个带有随机谷歌图片的 JSFiddle，如果你愿意，你可以编辑和重新发布。谢谢。

https://jsfiddle.net/ehuwg7w2/1/

<div class="a">
    <img src="https://kremalicious.com/media/gen/Free-Monkey-Breath-Not-Soylent-Green-800by1200-47ce3e.jpg">
    <p>I want to be inside the div height, not outside!</p>
</div>

Answer 1

如果您不想固定div.a 的高度，您只能使用height:100%; 而不是height:500px;

.a {
  width: 400px;
  height: 100%;
  border: 1px solid black;
  display: block;
  margin: 0 auto;
  text-align: center;
  padding: 5px;
}

.a img { max-width: 100%;
}

<div class="a">
    <img src="https://kremalicious.com/media/gen/Free-Monkey-Breath-Not-Soylent-Green-800by1200-47ce3e.jpg">
    <p>I want to be inside the div height, not outside!</p>
</div>

但是如果你需要 div.a 有固定的 height 并且想要在它的高度内容纳图像和文本，你可以这样做:

.a {
  width: 400px;
  height: 500px;
  border: 1px solid black;
  margin: 0 auto;
  text-align: center;
  padding: 5px;
  display:table;
}

.a img { 
  width: 100%;
  display:table-row;
  height:100%;
}
.a p{
  display:table-row;
  height:1px;
}

<div class="a">
    <img src="https://kremalicious.com/media/gen/Free-Monkey-Breath-Not-Soylent-Green-800by1200-47ce3e.jpg">
    <p>I want to be inside the div height, not outside!</p>
</div>