如何使图像的高度与引导程序的流体布局中的宽度相同

我正在使用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

如何使图像的高度与引导程序的流体布局中的宽度相同

回答

相关问题