Question

我正在尝试创建一个在页面上显示相机图像的应用程序。我有一个页面，将有两排3个摄像头使用4 x 4 x 4布局，并且工作正常，因为大多数屏幕适合两排摄像头。然而，当我添加另一行或两行时，我遇到了一个问题，我无法将所有内容放在同一页面上，它总是需要向下滚动一个较小的监视器才能看到内容。显然，默认情况下，当我将窗口大小缩小时，我的内容会缩小，但是我正在寻找一种方法在我的页面加载时自动执行此操作。

我尝试过做<div class="container" style="height: 75%; max-height: 80%">，但这似乎根本不影响身高。

在布局方面，这是我的第一排相机：

<div class="container" style="height: 75%; max-height: 80%">
    <div class="row">

            <div class="row">
                <div class="col-md-4">
                    <asp:Image ID="Image1" runat="server" Height="100%" Width="100%" />
                </div>
                <div class="col-md-4">
                    <asp:Image ID="Image2" runat="server" Height="100%" Width="100%" />
                </div>
                <div class="col-md-4">
                    <asp:Image ID="Image3" runat="server" Height="100%" Width="100%" />
                </div>
            </div>

我已尝试设置<div class="container" style="height: 500px;">以查看是否会手动设置高度 - 这不起作用。我正在使用Bootstrap 3.3.6

Answer 1

百分比高度需要在父元素上设置高度，否则它将不会按照您的想法执行。

由于上述原因，在.container上设置高度不适用于高度和宽度设置为100％的图像。

在指定高度的元素与使用height: 100%;的元素之间有三个元素。你需要：

在.col-md-4或
让.container与您的图片之间的每个元素都设置为height: 100%;。这样，在.container上设置的高度将“到达”图像。

你现在拥有什么

<div class="container" style="height: 75%; max-height: 80%">
    <div class="row"><!-- No height set -->
        <div class="row"><!-- No height set -->
            <div class="col-md-4"><!-- No height set -->
                <!-- Percentage height doesn't work here as parent doesn't have a height explicitly set. -->
                <asp:Image ID="Image1" runat="server" Height="100%" Width="100%" />
        </div>
    </div>
</div>

选项1

.col-camera {
    height: 150px;
}

<div class="container" style="height: 75%; max-height: 80%">
    <div class="row"><!-- No height set -->
        <div class="row"><!-- No height set -->
            <div class="col-camera col-md-4"><!-- Height set (via CSS, 150px) -->
                <!-- Percentage height will work here as parent does have a height explicitly set. -->
                <asp:Image ID="Image1" runat="server" Height="100%" Width="100%" />
        </div>
    </div>
</div>

选项2

此选项假设.container能够占据其父级的75％，因为父级设置了高度。

.container {
    height: 75%;
    max-height: 85%;
}
.container .row,
.container .col-md-4 {
    height: 100%;
}

<div class="container">
    <div class="row"><!-- Height set (via CSS, 100%) -->
        <div class="row"><!-- Height set (via CSS, 100%) -->
            <div class="col-md-4"><!-- Height set (via CSS, 100%) -->
                <!-- Percentage height will work here as parent does have a height explicitly set. -->
                <asp:Image ID="Image1" runat="server" Height="100%" Width="100%" />
        </div>
    </div>
</div>

我确定还有其他解决方案，但请记住，如果您使用百分比高度，则必须在父元素上设置高度。如果该父元素的高度也是百分比，那么它将需要在其父元素上设置高度，依此类推。

如果符合您的支持级别，您可以考虑使用viewport units。

在可视区域中安装所有Bootstrap内容

1 个答案: