html - Bootstrap 响应式图像和固定大小的缩略图

Question

我是 bootstrap 的新手，所以如果我的问题很简单，请原谅我。我有一个显示图像行 (4x4) 的页面。但是，图像的大小不同。我想要做的是将图像显示为缩略图(固定大小:高度 = 200 像素，宽度 300 像素)，但我仍然想保持页面的响应能力。因此，当屏幕尺寸发生变化时，它会使用 bootstrap 响应式 css。我尝试在 img-thumbnail 中设置固定的宽度和高度，但我失去了响应能力。有什么建议么？顺便说一句，如果有人想知道的话，我正在使用 Asp.net MVC。

Bootstrap

.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;
  height: auto;
}
.img-rounded {
  border-radius: 6px;
}
.img-thumbnail {
  display: inline-block;
  max-width: 100%;
  height: auto;
  padding: 4px;
  line-height: 1.42857143;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  -webkit-transition: all .2s ease-in-out;
       -o-transition: all .2s ease-in-out;
          transition: all .2s ease-in-out;
}

我的索引页

<img class="img-thumbnail img-responsive" src="@Model.ItemPaged.ElementAt(x).src" alt="">

</div>

Answer 1

您可以将该图像的最大宽度设置为 300 像素，宽度为 100%。因此，当它可用时(在网络上)将采用最大宽度 300px，并且在响应时它将采用其容器的整个宽度。 图片{ 最大宽度:300px； 宽度:100%；