引导 img 响应类和缩略图类有什么区别

Question

我在两个不同的项目中使用了两者，但我似乎看不出两者之间的区别。 img-response似乎更混乱，但我仍然不知道它们到底做了什么以及它们有什么不同？

项目1：class="thumbnail"
项目2：class="img-responsive"

Answer 1

来自 Bootstrap 源代码：

.img-responsive {
    display: inline-block;
    height: auto;
    max-width: 100%;
}
.thumbnail {
  display: block;
  padding: 4px;
  margin-bottom: 20px;
  line-height: 1.42857143;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  -webkit-transition: border .2s ease-in-out;
       -o-transition: border .2s ease-in-out;
          transition: border .2s ease-in-out;
}

Answer 2

.img-responsive 类将最大宽度：100%，高度：自动和显示：块应用于图像，从而有效地使其缩放到其父容器的宽度。

.img-thumbnail类将样式应用于图像，包括填充和边框