如何显示不同高度尺寸的图像
问题描述:
我有一排,并且该行有3篇文章,每篇文章里面有一张照片, 但是问题是当我去显示行出现一些问题时, 问题是照片不能是相同的高度尺寸,这使我的网站看起来不好。图片链接------- https://i.stack.imgur.com/N5EVB.png如何显示不同高度尺寸的图像
记下每一张照片的高度使用引导
我的代码
'<div class='row'>
// product 1
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="/*Path here*/">
<div class="caption max">
<h2>/*subject*/</h2>
<h4>Selling by /*name*/</h2>
<p>/*main-information*/</p>
</div>
</div>
</div>
// product 2
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="/*Path here*/">
<div class="caption max">
<h2>/*subject*/</h2>
<h4>Selling by /*name*/</h2>
<p>/*main-information*/</p>
</div>
</div>
</div>
// Product 3
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="/*Path here*/">
<div class="caption max">
<h2>/*subject*/</h2>
<h4>Selling by /*name*/</h2>
<p>/*main-information*/</p>
</div>
</div>
</div>
</div> // closing row '
谢谢您是从其他的一个
不同。
答
<style type="text/css">
/* thubnail div */
.thumbnail {overflow: hidden; box-sizing: border-box;}
/* all images in thumbnail div*/
.thumbnail img{min-width: 200px; min-height: 123px; width: 200px; height: 123px; max-width: 200px; max-height: 123px; }
</style>
+1
谢谢你的作品:D –
答
您可以为图像设置相同的尺寸:
.sameSize{
width: 100px;
height: 100px;
}
如果你不希望这样,你可以设置的文章同样的高度。
得到图像的宽度和高度与直接设置高度图像标记上的CSS –
或CSS – Roljhon
我没有已经但图像高度彼此 –