Question

我想在一些div中放入一个图像，并在不改变宽高比的情况下使其尽可能大。在图像及其父图像上将max-height和max-width设置为100％不起作用，图像溢出（我猜是因为父级实际上没有宽度或高度，因此图像无法调整大小？）。

<div class="block">
  <div class="row">
    <div class="col-xs-9">
      <div class="thumbnail">
        <img class="placeholder" src="https://unsplash.it/900/600" alt="">
      </div>
    </div>
    <div class="col-xs-3">
    </div>
  </div>
</div>

修改
我将在今晚晚些时候澄清我真正想要实现的目标。

Answer 1

将图片设置为.thumbnail的背景图片，并使用background-size（demo）限制其大小：

.thumbnail {
  display: inline-block;
  margin: 0;
  height: 100%;
  width: 100%;
  background: url("https://unsplash.it/900/600") no-repeat;
  background-size: contain;
}

Answer 2

如果您希望父div与其内容相匹配，请在“outline-block”display:table;课程中添加css。

Fiddle

关于堆栈溢出的类似帖子：how-do-i-auto-resize-an-image-to-fit-a-div-container

HTML将图像适合父母的父母

2 个答案: