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>

我该怎么做？在我的例子中，我定义了高度：100px;，这导致没有响应，如果我调整浏览器的大小，div的高度保持不变。如果可能，我希望此图像列表响应。

Answer 1

将height和width更改为max-height和max-width。图像不会比它的父母大。

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

Updated Fiddle

Answer 2

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

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

Answer 3

2017年你可以使用flex。此外，您将以缩略图容器为中心获取图像：updated 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;
}

Answer 4

这应该有帮助，至少对你的例子而言。可能在某些情况下这不起作用。在这种情况下，你必须找到一个js解决方案。

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

Answer 5

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

使用此功能。

Answer 6

 .thumbnail {
        height: 100%;
    }

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

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会覆盖Bootstraps样式，至少对我而言，因为添加的样式包含在Bootstraps自己的样式之后。（但这是多余的。）

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

7 个答案: