在引导程序上构建缩略图

Question

所以我遇到了定位和对齐缩略图的问题。我想在 div 上放置固定的宽度和高度，但是当我使用 Bootstrap 时，我已经放置了 col-md 和 col-xs 以提高响应能力，现在我无法弄清楚如何适应每个图像，无论它有多大是一个固定的宽度和高度。我尝试过百分比和像素，但随后它失去了移动性和响应能力，并保持在该宽度上。这是问题的图片http://postimg.org/image/n4tnblczd/。我会非常感谢一些建议如何将大图片调整为固定的宽度和高度，但要保持它的响应能力。

Answer 1

在提问之前建议提供您的示例代码。我想你想知道html结构的过程。 使用下面的 html 代码进行引导支持。 div 类中的 col-md 和 col-sm。 img 类将是“img-responsive”。它会得到 bootstrap.min.css

<div class="col-md-6 col-sm-6 col-xs-12 text-left">
    <img src="/images/choose-us.png" class="img-responsive">
</div>

使用这个我想它会解决你的问题。这是我使用不同图像大小的 css 应用的屏幕截图。

由于引导 css 链接，下面的 sn-p 代码没有显示确切的样式。

.thumbnail{
padding: 0px;
border-radius: 0px;
position: relative;
border: 1px solid #222;
}


.thumbnail img{
 height: 347px;
}
.drzac{
margin-top: 30px;
}

.overlay{
display: block;
transition: all 0.3s;
-webkit-transition: all 0.3s;
background-color: rgba(50, 200, 235, 0.5);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
font-size: 2em;
text-align: center;
}

<div class="col-xs-6 col-md-4">
				<div class="thumbnail">
				<img src="http://www.it4gen.com/wp-content/uploads/2013/02/learnindoorgrowing.com_-460x345.png" class="img-responsive">
				    <a href="#" class="overlay"><div class="centered"><i class="fa fa-search"></i></div></a>
				</div>
</div>

<div class="col-xs-6 col-md-4">
				<div class="thumbnail">
				<img src="http://www.totalcableusa.com/images/choose-us.png">
				    <a href="#" class="overlay"><div class="centered"><i class="fa fa-search"></i></div></a>
				</div>
</div>
    
    <div class="col-xs-6 col-md-4">
				<div class="thumbnail">
				<img src="http://www.totalcableusa.com/images/choose-us.png">
				    <a href="#" class="overlay"><div class="centered"><i class="fa fa-search"></i></div></a>
				</div>
    </div>