如何顯示不同高度尺寸的圖像

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

謝謝您是從其他的一個

不同。

來源

2017-02-26 James H. Shebli

得到圖像的寬度和高度與直接設置高度圖像標記上的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>

來源

2017-02-26 14:23:29

謝謝你的作品：D –

您可以爲圖像設置相同的尺寸：

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

如果你不希望這樣，你可以設置的文章同樣的高度。

來源

2017-02-26 14:01:40

設置最小高度到整個容器

來源

2017-02-26 14:03:23

請嘗試展開此答案。像這樣，它對未來的讀者幾乎沒有幫助。 – idmean

如何顯示不同高度尺寸的圖像

回答

相關問題