2014-02-19 105 views
0

正如你可以看到,右邊的圖像未正確安裝到我的縮略圖如何設置圖像大小以匹配自舉縮略圖?

enter image description here

請告訴我奇怪的是,這兩個圖像(顯然是從谷歌圖片)

<div class="jumbotron"> 
    <div class "container"> 
    <h1>In Your Shoes:<br> Make Connections Anonymously<br> </h1> 
    <h2> 
     <div class="row"> 
     <div class="col-xs-4 col-md-4 col-lg-4"> 
      <a href="#" class="thumbnail"> 
      <%= image_tag("blank_avatar_male.jpg") %> 
      </a> 
     </div> 
      <div class="col-xs-4 col-md-4 col-lg-4"> 
      <a href="#" class="thumbnail"> 
      <%= image_tag("img_thing.jpeg") %> 
      <a/> 
      </div> 
      <div class="col-xs-4 col-md-4 col-lg-4"> 
      <a href="#" class="thumbnail"> 
      <%= image_tag("blank_avatar_female.jpg") %> 
      </a> 
      </div> 
     </div> 
     </h2> 

完全一樣的分辨率我知道html代碼看起來不漂亮,因爲我自己在做這個。 我很樂意提供如何改進它的建議!由於

回答

1

隨着走出知道圖像的大小,這是很難,但是這可能幫助

.thumbnail img {width:100px;height:100px} 

只需更換100像素與正確的尺寸。這應該使它統一。

+0

300x300,對不起,添加信息! –

+0

試試這個爲300px .thumbnail img {width:300px; height:300px} – Travis

+0

還有一點空間left = \。我認爲,因爲背景圖像的顏色是灰色的,所以會顯示它,而其他圖像背景是白色的。好吧。謝謝! –

2

使用百分比爲解密尺寸,如下所示:

.thumbnail img { 
    width:100%; 
    height:100%; 
} 

注意,這將不尊重原始圖片縱橫比(它會根據被拉伸如果任一條件的不滿足:容器。寬度/ image.width == 1 & & container.height/image.height == 1

可以執行以下雖然以修復:中心的圖像水平地同時匹配的高度:

.thumbnail img { 
    text-align: center; 
    height:100%; 
} 

但是,您可能會看到圖像兩側的接縫,具體取決於顏色。

相關問題