html - 如何在bootstarp4中使大图像不被绘制到我们想要的高度

Question

我想在引导程序（图像叠加）中制作一个像卡片一样的大图像，但是图像太大而且我想要的高度..这是我所做的：

html：

<section class="card bg-dark no-border">
        <div class="flex-column justify-content-center align-items-center bg-danger text-dark">
            <img class="card-img img-fluid" src="img/bg_1.jpg" alt="Card image">
            <div class="card-img-overlay text-center m-auto">
                <h5 class="card-title mt-3">Card title</h5>
                <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
                    content. This content is a little bit longer.</p>
                <p class="card-text">Last updated 3 mins ago</p>
            </div>
        </div>
    </section>

有没有人知道用 flex 使文本居中的更好方法？..我为此使用了边距，但这样做会更好。

Answer 1

我觉得你只是一张分辨率不好的照片

Answer 2

请先选择 flexbox 文档，但是对于您的问题，我给您一个解决方案。

只需添加d-flex flex-column justify-content-center align-items-center您的文本块，为了显示文本目的，我用它突出显示它text-danger

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">


<section class="card bg-dark no-border">
    <div class="bg-danger text-dark">
        <img class="card-img img-fluid" src="https://images.wallpaperscraft.com/image/bird_silhouette_vector_134154_1920x1080.jpg" alt="Card image">
        <div class="card-img-overlay text-center m-auto d-flex flex-column justify-content-center align-items-center text-danger">
            <h5 class="card-title mt-3">Card title</h5>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
                content. This content is a little bit longer.</p>
            <p class="card-text">Last updated 3 mins ago</p>
        </div>
    </div>
</section>

Answer 3

我这样做是为了在网页上显示一个大图像，我编写了自己的课程来实现这一点：

CSS：

<style>
.proposal{
    background-image: url("http://lorempixel.com/1020/200/nature/");
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    min-height: 200px;
}
</style>

HTML：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<section class="container-fluid proposal justify-content-center align-items-center d-flex">
    <div class="row flex-row  justify-content-center align-items-center">
        <div class="col-12 col-sm-5">
            <p class="text-center text-sm-left">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab blanditiis cupiditate deleniti dignissimos dolorem doloremque, illo laborum, libero, nesciunt odit qui sit veritatis? Atque illum iusto maxime, nulla optio saepe?
            </p>
        </div>
        <div class="col-12 col-sm-5 text-center">
            <a href="#" class="btn btn-warning" id="visit_time">btn</a>
        </div>
    </div>
</section>