Html 将段落和图像放在固定的div中

我计划建立几个部门，包括一个段落和一个图像。图像和段落的大小都不一样。div具有固定高度，图像高度将更改为适合段落后的其余高度。图像应该完全显示在div上，这意味着我不能执行溢出：隐藏在div上

.container{
边框：1px实心#000；
高度：250px；
}

这是随机信息，高度可能因段落内容而异

通过降低图像高度来调整div高度！请遵循此代码

.container{
边框：1px实心#000；
高度：250px；
显示：块；
溢出y：滚动；
}
.货柜{
单词包装：打断单词；
}

这是随机信息，高度可能因段落内容而异。这是随机信息，高度可能因段落内容而异

我不确定自己是否完全理解，但如果您希望图像不会脱离其容器，只需将容器设置为溢出：隐藏；这样，它将包含在容器中。

您可以将CSS添加到图像本身。这将根据父对象的尺寸确定图像的

最大高度

和

最大宽度

。在这种情况下，

高度：250px。唯一的问题是，如果需要填充，则必须在图像的
max height
上添加
calc
（以扣除填充）

注意，我在这把小提琴上添加了“规范化CSS”


HTML

<div class='container'>
  <p>This is random information, the height could be differnet depened on the content of the paragraph</p>
  <a href='http://google.ca'>
    <img src="http://lorempixel.com/800/500/nature/" class="img-responsive">
  </a>
</div>


这是随机信息，高度可能因段落内容而异


您可以看到，在本例中，图像的尺寸（取自URL）为800px x 500px，但图像看起来仍然正确缩放

如果不想将
填充
应用于容器，请从
.container
中移除，并将
最大高度
调整为
100%取而代之。
您使用的是css框架吗？图像应该完全显示，这样我就不会溢出：hiddenI使段落更长（只是将段落增加三倍），然后图像将被推到div之外，然后您将无法在不限制
p
元素内容的字符数的情况下执行此操作。此外，只能从父容器的高度获得可缩放图像，在这种情况下，硬设置
250px，不使用Javascript，也不使用
覆盖：隐藏段落内容可能会更改，如果段落较长，固定高度图像将溢出
<div class='container'>
  <p>This is random information, the height could be differnet depened on the content of the paragraph</p>
  <a href='http://google.ca'>
    <img src="http://lorempixel.com/800/500/nature/" class="img-responsive">
  </a>
</div>