我正在使用bootstrap。当我添加比其他图像稍大的图像时，我的div尺寸看起来不均匀。我不知道如何解决它。这是代码
<div class="container">
<div class="row">
<div class="col-md-9" style="">
<div class="row">
<div class=" col-md-4 " style="">
<div class="relative">
<img class="img-responsive" src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
<div class="tip">
<h3><a href="#">Test block1</a></h3><div class="text">
<em><a href="#">AAAA</a></em>
<p>Test paragraph 1</p>
</div></div>
</div>
</div>
<div class=" col-md-4 " style="">
<div class="relative">
<img class="img-responsive" src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
<div class="tip">
<h3><a href="#">Test block 2</a></h3><div class="text">
<em><a href="#">BBBB</a></em>
<p>New paragraph</p>
</div></div>
</div>
</div>
<div class=" col-md-4 " style="">
<div class="relative">
<img class="img-responsive" src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
<div class="tip">
<h3><a href="#" title="Leasingforløpet">New title</a></h3><div class="text">
<em><a href="#">Title block 3</a></em>
<p>Paragraph </p>
</div></div>
</div>
</div>
</div>
<div class="row">
<div class=" col-md-4 " style="">
<div class="relative">
<img class="img-responsive" src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
<div class="tip">
<h3><a href="#" title="Elgen i baksetet">Title3</a></h3><div class="text">
<em><a href="http://minleasing.no/category/minleasing/">Title block 4</a></em>
<p>Paragrpah start</p>
</div></div>
</div>
</div>
<div class=" col-md-4 " style="">
<div class="relative">
<img class="img-responsive" src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
<div class="tip">
<h3><a href="#" title="Leasing – Et trekantforhold">FFFFFFFFFFF</a></h3><div class="text">
<em><a href="#">GGGGGGGGG</a></em>
<p>GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG</p>
</div></div>
</div>
</div>
<div class=" col-md-4 " style="">
<div class="relative">
<img id="problemImage" class="img-responsive" src="http://minleasing.no/wp-content/uploads/2014/11/refleksdagen1-350x302.jpg" />
<div class="tip">
<h3><a href="#" title="Leasingforløpet">Problem Image</a></h3><div class="text">
<em><a href="#">aaagr</a></em>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div></div>
</div>
</div>
</div>
</div>
<div class="col-md-3"><div class="facebook">Facebook Stuff</div></div>
</div>
以下是Fiddle
的链接如果您查看代码，那个ID为problemImage的图片会导致不公平
答案 0 :(得分：0)
我认为在这种情况下你将要做的就是在所有图像上设置一个难度。 （或者添加一个具有硬度设置的类，由你决定）你需要编辑照片以匹配所选的高度，否则它看起来都会变软;）
请注意，img标签上的height属性设置为200px。
这会强制每张图片遵守此规则，使您的网站看起来整洁有序，并防止任何图片太大或太小。
更新小提琴：https://jsfiddle.net/5tr34k/pk1pr96n/117/
<div class=" col-md-4 " >
<div class="relative">
<img style="height:200px;" class="img-responsive" src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
<div class="tip">
<h3><a href="#">Test block1</a></h3>
<div class="text">
<em><a href="#">AAAA</a></em>
<p>Test paragraph 1</p>
</div>
</div>
</div>
</div>
<div class=" col-md-4 " style="">
<div class="relative">
<img style="height:200px;" class="img-responsive" src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
<div class="tip">
<h3><a href="#">Test block 2</a></h3>
<div class="text">
<em><a href="http://minleasing.no/category/leasing/">BBBB</a></em>
<p>New paragraph</p>
</div>
</div>
</div>
</div>
<div class=" col-md-4 " style="">
<div class="relative">
<img style="height:200px;" class="img-responsive" src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
<div class="tip">
<h3><a href="#" title="Leasingforløpet">New title</a></h3>
<div class="text">
<em><a href="http://minleasing.no/category/leasing/">Title block 3</a></em>
<p>Paragraph </p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class=" col-md-4 " style="">
<div class="relative">
<img style="height:200px;" class="img-responsive" src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
<div class="tip">
<h3><a href="#">Title3</a></h3>
<div class="text">
<em><a href="#">Title block 4</a></em>
<p>Paragrpah start</p>
</div>
</div>
</div>
</div>
<div class=" col-md-4 " style="">
<div class="relative">
<img style="height:200px;" class="img-responsive" src="http://www.imagesfestival.com/images/resize.php?width=350&src=images/news/216.jpg" />
<div class="tip">
<h3><a href="#">FFFFFFFFFFF</a></h3>
<div class="text">
<em><a href="http://minleasing.no/category/leasing/">GGGGGGGGG</a></em>
<p>GGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG</p>
</div>
</div>
</div>
</div>
<div class=" col-md-4 " style="">
<div class="relative">
<img style="height:200px;" id="problemImage" class="img-responsive" src="http://minleasing.no/wp-content/uploads/2014/11/refleksdagen1-350x302.jpg" />
<div class="tip">
<h3><a href="#" title="Leasingforløpet">Problem Image</a></h3>
<div class="text">
<em><a href="http://minleasing.no/category/leasing/">Problem iamge </a></em>
<p>Test</p>
</div>
</div>
</div>
</div>
更新 - 这是上面的小提琴的屏幕截图，显示在较小的屏幕上正确调整大小：
