как сделать большое изображение, чтобы оно не рисовалось в высоту, которую мы хотим в bootstarp4

Question

Я хочу сделать большое изображение, например, карты в bootstrap (Наложения изображений) , но изображение слишком велико и высота, которую я хочу ... это я уже сделал:

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

Пожалуйста, сначала выберите документацию 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 2

я сделал это для большого изображения, чтобы показать на веб-странице, я пишу свой собственный класс, чтобы это произошло:

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>

Answer 3

Мне кажется, вы просто картинка с плохим разрешением