如何显示不同高度尺寸的图像

问题描述：

我有一排，并且该行有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 '

谢谢您是从其他的一个

不同。

得到图像的宽度和高度与直接设置高度图像标记上的CSS –

或CSS – Roljhon

我没有已经但图像高度彼此 –

答

<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>

谢谢你的作品：D –

答

您可以为图像设置相同的尺寸：

.sameSize{ 
    width: 100px; 
    height: 100px; 
}

如果你不希望这样，你可以设置的文章同样的高度。

答

设置最小高度到整个容器

请尝试展开此答案。像这样，它对未来的读者几乎没有帮助。 – idmean

如何显示不同高度尺寸的图像

相关推荐