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;

＆＃13;

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

＆＃13;

<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>

＆＃13;

但是如果您需要div.a来修复height并希望将图片和文字放在其高度内，您可以这样做：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

试试这个css

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

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

Answer 3

请尝试以下方法：

.a {
  width: 400px;
  height: auto;
  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>

Answer 4

只需将高度设置为100％而不是500px

＆＃13;

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

＆＃13;

Answer 5

只需将parent div height设置为auto即.a height。因此，这会自动将您的div和text带到div边框内。

＆＃13;

.a {
  width: 400px;
  height: auto;/*Changed this to auto*/
  border: 1px solid black;
  display: block;
  margin: 0 auto;
  text-align: center;
  padding: 5px;
}

.a img { max-width: 100%;
}

＆＃13;

<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>

＆＃13;

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

5 个答案: