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

Question

我想做一个像cards in bootstrap (Image overlays) but image is too big and the height i want ..this is i have done :

这样的大图

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

我这样做是为了在网页中显示大图像，我自己写 class 来实现这一点：

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>

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

how to make a big image to be not drawn to height we want in bootstarp4

html

image

bootstrap-4

flexbox

bootstrap-cards