时间戳

首页 > 解决方案 > 在引导容器 / div 中保持对内容的约束

html - 在引导容器 / div 中保持对内容的约束

问题描述

我正在尝试缩小容器内的所有内容。我有需要保持一定宽度和高度的图像。但是，如果屏幕变小，所有图像都会开始失去位置，内容开始缩小，尺寸开始改变。我了解图像/内容将更难看到。

我正在使用带有 HTML 和 CSS 的 Bootstrap 4 d-flex 是引导程序，而无填充只是删除了默认 cols 给出的填充。

小图 大图

<div class="container" style="min-width: 100%;">
                    <div class="row main-stage" id="main-stage" style="justify-content: center;">
                        <div class="col-12 d-flex no-padding text-center justify-content-center" style="background-color: #fff;">
                            <img src="/assets/img/banner/1200x200Banner.png" alt="" class="p-4" style="min-height: 200px;">
                        </div>
                        
                    </div>
                    <div class="row">
                        <div class="col-12 d-flex no-padding">
                            <div class="col-2" style="background-color: #fff;">
                                <img  src="/assets/img/banner/400x160Banner.png" alt=""
                                    style="min-height: 400px; max-height: 400px; min-width: 100%; border-top: solid 10px; border-bottom: solid 10px;">
                            </div>
                            <div class="col-8" style="background-color: #fff;">
                                <div class="row m-4">
                                    <div class="col-12 text-center">
                                        <img src="/assets/img/banner/200x100banner.png" alt="">
                                    </div>
                                </div>
                                <div class="row text-center">
                                    <div class="col-4">
                                        <img src="/assets/img/banner/100x180Banner.png" alt="" >
                                    </div>
                                    <div class="col-4 text-center">
                                        <img src="/assets/img/banner/200x100banner.png" alt="" >
                                    </div>
                                    <div class="col-4">
                                        <img src="/assets/img/banner/100x180Banner.png" alt="">
                                    </div>

                                </div>
                            </div>
                            <div class="col-2" style="background-color: #fff;">
                                <img class="" src="/assets/img/banner/400x160Banner.png" alt=""
                                    style="max-height: 400px; border-top: solid 10px; border-bottom: solid 10px;">
                            </div>

                        </div>
                       
                        

                    </div>

                </div>

标签： htmlcssbootstrap-4

解决方案

试试这个代码，这是一个很好的方法来满足您的要求。

运行代码@codeply

变化

我对代码进行了不同的修改，因为行和容器的嵌套不是一个好主意。

使各种组件流体运动的主要变化是在开头添加 container-fluid 标签。

如果您可以创建流体运动的错觉，则必须为图像添加“img-fluid”类，并且所有组件将动态调整代码以适应不同的屏幕尺寸。

还有一些应用的弹性概念没有得到很好的解决。

与其在代码中使用 flex，不如尝试创建一个 scss 类型的样式页面，以便您可以动态解决这个问题。Bootstrap 4 将 flex 合并到它的代码中，但留下了一些可以从样式页面中利用的空间。我建议您查看以下页面，其中对此进行了详细说明。见链接

祝你好运！

推荐阅读