Question

我使用Bootstrap网格系统构建Web应用程序作为我的布局。到目前为止一切都工作得很好，但是我遇到了一个div行，它有一个大图像（宽度为1280px，高度为150像素），当你调整页面大小时，图像重叠在div上。

为了解决这个问题，我在我的div上设置了一个固定的高度（高度为150px）并且它停止了调整大小并重叠但是我引入了一个新问题。这样可以抛弃我的布局并添加一个垂直滚动条，我需要我的网页应用才能适应整个页面。

我在考虑添加一个溢出：隐藏到我的CSS但对我来说似乎有些笨拙。只是寻找建议，也许我的布局可能采用不同的方法。似乎Bootstrap剂量在固定高度上发挥得很好。

<div class="container-fluid row-fluid" style="height: 100%;">
    <div class="row grey" style="height: 10%;"> title of the website here </div>
    <div class="row yellow" style="height: 150px; text-align: center;"> 
        <img width="1280px" height="150px" src="https://41.media.tumblr.com/tumblr_m4n498M3NQ1r9f8g8o1_1280.png" />
    </div>
    <div class="row grey" style="height: 60%;"> main content area </div>
    <div class="row grey" style="height: 10%;"> footer area </div>
</div>

Answer 1

使用bootstrap的方式不正确。您没有正确操作引导网格系统。您已将图像排成一行但不在列中。您知道您应该连续至少有一列（例如col-md-12）。然后Bootstrap将完美地考虑您的图像或内容。重构您的代码并按照引导程序告诉您的方式进行操作。此外，您可以使用bootstrap的img-responsive类使您的图像响应。见这里：http://getbootstrap.com/css/#images-responsive

Answer 2

我认为你在寻找的是这个。这基本上适用于 max-width：100％;身高：自动;并显示：阻止; 到图像，以便它可以很好地缩放到父元素。

    <img src="..." class="img-responsive" alt="Responsive image">

您可以在http://getbootstrap.com/css/#images-responsive

了解更多信息

此处示例：https://jsfiddle.net/qxLtmhat/

Answer 3

首先你知道你应该至少有一列（例如连续的col-md-12） - 看看Imran的第一个答案，然后你硬编码宽度和高度 - 删除它们并添加img-responsive类img。

Bootstrap - 网格系统 - 固定高度问题

3 个答案: