Question

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

＆＃13;

.container {
  border: 1px solid #000;
  height: 250px;
}

＆＃13;

<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/300/200/nature/">
  </a>
</div>

＆＃13;

但是，大部分时间图像都会溢出，有没有解决方案我只能通过css将图像融入div？

Answer 1

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

＆＃13;

.container {
  border: 1px solid #000;
  height: 250px;
  display: block;
  overflow-y: scroll;
}

.container p {
  word-wrap: break-word;
}

＆＃13;

<div class='container'>
  <p>This is random information, the height could be differnet depened on the content of the paragraph 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/300/170/nature/">
  </a>
</div>

＆＃13;

Answer 2

我不确定我是否完全理解，但如果你想让图像没有突破它的容器，你可以简单地将容器设置为溢出：隐藏;这样，它将包含在容器中。

Answer 3

您可以将CSS添加到图像本身。这将根据父级维度确定图像的max-height和max-width。在这种情况下，height: 250px;。唯一的问题是，如果你想要填充，你必须在calc上为图像添加max-height（以扣除填充）。

请注意，我添加了＆＃34;规范化CSS＆＃34;在这个小提琴上

https://jsfiddle.net/7yjhz0dc/2/

.container {
  border: 1px solid #000;
  height: 250px;
  padding: 20px;

  a {
    display: block; // you always want this or inline-block for anchor tags wrapped around images, so the whole image is clickable
  }

  p {
    margin-top: 0;
  }
}

.img-responsive {
  display: block;
  max-width: 100%;
  max-height: calc(100% - 20px);  // 20px is the parent container's padding
}

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

您可以看到图片的尺寸（取自网址）在此实例中为800像素x 500像素，但图片仍然可以正确缩放。

如果您不希望将padding应用于容器，请从.container中移除，然后将max-height调整为100%;。

有一个段落和图像适合固定div

3 个答案: