如何将图像缩放以适应容器？

Question

我有一个图片列表，我希望将图片缩放到它们所在的容器大小相同。就像这样：

我创建了一个jsfiddle

<div class="container">
    <div class="row">
        <div class="col-xs-3">
            <a href="#" class="thumbnail">
                <img src="http://exmoorpet.com/wp-content/uploads/2012/08/cat.png">
            </a>
        </div>
        <div class="col-xs-3">
            <a href="#" class="thumbnail">
                <img src="http://www.nose2tail.co.uk/cat-matlock-derbyshire.jpg">
            </a>
        </div>
        <div class="col-xs-3">
            <a href="#" class="thumbnail">
                <img src="http://www.us.onsior.com/images/3_1/cat-3_1-01.png">
            </a>
        </div>
        <div class="col-xs-3">
            <a href="#" class="thumbnail">
                <img src="https://www.petfinder.com/wp-content/uploads/2012/11/155293403-cat-adoption-checklist-632x475-e1354290788940.jpg" >
            </a>
        </div>
    </div>
</div>

我该如何实现这一点呢？ 在我的例子中，我定义了height：100px;，这会导致不响应式，如果我调整浏览器大小，div的高度保持不变。 如果可能的话，我希望这个图像列表是响应式的。

- Sato

---

这可能会对你有所帮助.. http://jsfiddle.net/68b3g7pw/2/ - Shrinivas Pai

参见：https://dev59.com/Z2Qn5IYBdhLWcg3w7KvS#30252800 - Dave Jarvis

Answer 1

将height和width更改为max-height和max-width。图片的大小不会超过其父元素。

.thumbnail img {
    max-height: 100%;
    max-width: 100%;
}

更新后的 Fiddle

- GreyRoofPigeon

---

如何使图片水平垂直居中对齐？在我的示例中，我定义了 height: 100px;，这会导致不响应式，如果我调整浏览器大小，div 的高度仍然保持不变。 - Sato

你可以使用 display: table-cell; 和 vertical-align: middle;。 http://jsfiddle.net/7gk6squL/ - Philip Dernovoy

这是唯一一个答案（我看了十几个类似的问题），它确实可以做到我想要的！无论周围div的大小如何，图像都将保持其纵横比并缩小/放大图像以使其适应最相关边的100％。 - David Routen

Answer 2

.thumbnail {
    height: 100px;
    display: table;
}

.thumbnail img {
    height: 100%;
    width: 100%;
    display: table-cell;
    vertical-align: middle;
}

- Coding Enthusiast

Answer 3

2017年，您可以使用flex。此外，您将使缩略图容器中的图像居中：更新的fiddle

.thumbnail {
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: solid 1px blue;
}

.thumbnail img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: 0 auto;
    border: solid 1px red;
}

- raisercostin

Answer 4

这应该能帮到你，至少对于你的示例来说是这样。可能有一些情况下这种方法不起作用。在那种情况下，你需要找到一个js解决方案。

.thumbnail img {
  height: 100%;
  width: auto;
}

- m4lt3

Answer 5

.thumbnail img {
 height: 100%;
    width: 100%;
}

使用这个。

- Danish Khan

Answer 6

 .thumbnail {
        height: 100%;
    }

    .thumbnail img {
        max-height: 100%;
        max-width: 100%;
        border: 1px solid red;
    }

- Mr_vasu

Answer 7

虽然这是一个旧问题，但我会添加一个答案。我遇到了同样的问题，直到我在图像链接中添加了类thumbnail并深入研究了一下。不需要添加任何CSS。

也许有些东西已经改变了。在Bootstrap 3.3.7中，有这个（未压缩的CSS，第5019行）：

.thumbnail > img,
.thumbnail a > img {
  margin-left: auto;
  margin-right: auto;
}

还有这个（未压缩的 CSS，第 1124 行）：

.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;
  height: auto;
}

如果您已将类thumbnail添加到图像链接中，则一切都应该可以直接使用。（如果您删除了这两个内容，事情就会出错。）并且它可以与或不使用附加的CSS一起工作：

.thumbnail img {
  max-height: 100%;
  max-width: 100%;
}

添加的 CSS 覆盖了 Bootstrap 的样式，至少对我来说是这样，因为添加的样式在 Bootstrap 自己的样式之后包含。（但它是多余的。）

- ZZ-bb