Question

我正在使用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-size的div类包装元素，甚至没有任何效果。任何人都可以帮我如何设置高度值，这将影响图像的高度？

由于

Answer 1

除非您为包装img的标签设置了高度，否则无法按百分比指定高度。所以你必须以像素为单位设置高度。例如：

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

如果您仍想使用％，则必须为wrapper div设置高度。

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

1 个答案: