如何使圖像的高度與引導程序的流體佈局中的寬度相同

我正在使用twitter bootstrap的流體佈局編寫web應用程序。我的代碼如下所示。如何使圖像的高度與引導程序的流體佈局中的寬度相同

<div class="row-fluid"> 
    <div class="offset1 span10"> 
     <div class="row-fluid"> 
      <div class="span4 border-line"> 
         <div class="row-fluid"> 
          <h4 class="text-center"><a href="/category">name_of_item</a></h4> 
          <a target="_blank" href="link_for_item"> 
           <img class="item-size" src="photo.url"/> 
          </a> 
          <p> quick_summary|safe </p> 
         </div> 
      </div> 
      <div class="span4 border-line"> 
         <div class="row-fluid"> 
          <h4 class="text-center"><a href="/category">name_of_item</a></h4> 
          <a target="_blank" href="link_for_item"> 
           <img class="item-size" src="photo.url"/> 
          </a> 
          <p>quick_summary</p> 
         </div> 
      </div> 
     </div> 
    </div> 
</div>

而且在我的CSS看起來像下面的項目規模

.item-size{ 
     width: 100%; 
     height: 50%; 
    }

在上面的例子中一切正常，除了高度的圖像項目。無論何時我改變爲不同的值（例如：60％），圖像寬度都會發生變化，但高度值對大小沒有任何影響。我曾嘗試用.item大小的div類包裝元素，甚至沒有任何效果。任何人都可以幫助我如何設置將影響圖像高度的高度值？

感謝

來源

2013-03-12 Dev

你對「對身高有影響」是什麼意思？你想讓自己的形象保持長寬比嗎？並且想通過設定'身高：50％;'做成效果？據我所知，它應該使圖像的50％高度被嵌入容器的高度。如果這個容器（通常只是div）沒有響應地改變高度，那麼圖像的高度不會改變。 – 2013-03-13 18:58:42

不能按百分比指定高度，除非你已經設置其包裹在img標籤的高度。所以你必須以像素爲單位設置高度。 EX：

.item-size{ 
    width: 100%; 
    height: 200px; 
}

如果您仍想使用％你必須設置高度爲wrapper div。

來源

2013-03-12 23:45:19

是的，或者爲了簡化您的生活，您可以在span10上設置高度：http://jsfiddle.net/panchroma/BedwM/ – 2013-03-12 23:54:20

感謝您的回覆。如果我將高度更改爲200px，那麼即使當我調整窗口大小時，是否也不意味着它的流體響應速度已經固定在200px？無論如何，我可以讓身高也有反應？ – Dev 2013-03-13 19:00:44

如果以像素爲單位設置跨度的高度，則可以用百分比設置圖像的高度。但是，什麼意思是響應高度？ – 2013-03-14 03:47:01

如何使圖像的高度與引導程序的流體佈局中的寬度相同

回答

相關問題