较小的分辨率会使图像变小（bootstrap-5 Fluid）

Question

当前发生的事情： 当使用 Chrome 浏览器设备工具栏工具以不同的分辨率测试我的网站时，我注意到当我将设备屏幕缩小到“Mobile-s”320 像素时，我页面上的内容变得几乎不可读。这也导致图像非常小，更不用说分解到单个字母彼此堆叠的点的句子了。

我希望发生的事情：我希望卡片中的内容随着屏幕分辨率的降低而缩小，但也变得可读并且图像保持大够见了。

我在我的项目中使用的是：

html
css
助推器 5

这是我的博客部分 html：

你可以看到我在最外层 div.

使用 container-fluid

   <h2 class="display-6 mb-5">My blog:</h2>
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-4 ">
                        <div class="card " >
                            <img src="img/1.jpg" class="card-img-top " alt="...">
                            <div class="card-body ">
                                <h5 class="card-title">Card title</h5>
                                <p class="card-text">Some quick example text to build on the card 
                                   title and make up the bulk of the card's content.</p>
                                <a href="#" class="btn btn-primary">Go somewhere</a>
                            </div>
                        </div>
                    </div>

这是我的图片部分的html：

你可以看到我还在最外层 div.

使用 container-fluid

 <h2 class="display-6">My projects:</h2>
            <div class="container-fluid">
                <div class="row gy-5"> <!--gy-5 will provide spacing between each image -->
                    <div class="col-md-6"><img src="img/1.jpg" alt="Portfolio image" class="img-fluid thumbnail">
                    </div>
                    <div class="col-md-6"><img src="img/1.jpg" alt="Portfolio image" class="img-fluid thumbnail">
                    </div>
                    <div class="col-md-6"><img src="img/1.jpg" alt="Portfolio image" class="img-fluid thumbnail">
                    </div>
                    <div class="col-md-6"><img src="img/1.jpg" alt="Portfolio image" class="img-fluid thumbnail">
                    </div>
                    <div class="col-md-6"><img src="img/1.jpg" alt="Portfolio image" class="img-fluid thumbnail">
                    </div>
                    <div class="col-md-6"><img src="img/1.jpg" alt="Portfolio image" class="img-fluid thumbnail">
                    </div>

                </div>
            </div>

这是我的 css 中包含的内容：

    body, html{
    height: 100%;

}

body{
    font-weight: 200;
    font-size: 1.5rem;
    color: #444;
}

.intro-left{
    background: url("../img/1.jpg");/*concrete background*/
    position: fixed;
    left: 0;
    width: 33.3333%;
    height: 100%;
    color: white;

}

@media(max-width: 768px) { /*@media rule will add the code inside only if the max-width is 768px */
    .intro-left{
        height: 80vh;
        margin-bottom: 0;
        position: relative;
        width: 100%;
    }

}

.avatar{
    width: 10rem;
    height: 7em;
    border-radius: 50%;
    margin: 1rem;
}

.full-height {
    height: 100%;
}

.quote{
    float: right;
}

section{
    margin: 5rem;
    font-size: 1.2rem;
}

a{
    color: #444;
    text-decoration: none;
}

卡片当前在 320 像素上的显示效果

图像当前在 320 像素上的显示效果

卡片应该在 320px

上的外观

图像应该在 320px

上的外观

Answer 1

您在 col-md-6 中定义了图像 DIV 的大小，您必须定义不同大小的类。

例如：

<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-3 col-xxl-3">
    <img src="img/1.jpg" alt="Portfolio image" class="img-fluid thumbnail">
</div>

我建议学习 Bootstrap 网格系统文档 https://getbootstrap.com/docs/5.0/layout/grid/#grid-options

Answer 2

减少节边距会增加元素的大小。这是因为应用到 class 部分的边距会导致整个元素周围出现间隙。最初问题产生的差距是 5rem。随着分辨率的降低，由边距创建的间隙保持其 5rem，从而使使用 class 部分的元素在屏幕结果降低时变得更小。一旦这个边距减少到 0.1rem，它就会减少所有边的间隙，当分辨率降低时，这会导致元素变得很多 larger/readable。

来自这里：

section{
   margin: 5rem; 
   font-size: 1.2rem;
 }

为此：

section{
   margin: 0.1rem; 
   font-size: 1.2rem;
 }

较小的分辨率会使图像变小（bootstrap-5 Fluid）

Smaller resolution makes images tiny (bootstrap-5 Fluid)

html

css

bootstrap-4

bootstrap-5