Как изменить высоту bootstrap?

Question

[Богдан Олийник]

Доброго времени суток, или я туплю, или что то не так, ребят, нужна вот такая галерея(только вместо блоков с текстом будут такие же как и соседние картинки):

И есть такой код секции:

spoiler

<section class="blog pt-5 pb-5 h-100">
            <div class="container">
                <div class="row no-gutters">
                    <div class="col-12">
                        <p class="title_section text-uppercase text-black-50">blog</p>
                        <img class="d-block mx-auto mt-4" src="img/small_line.png" alt="small_line">
                        <p class="text-black-50 w-100 mx-auto mt-5 text-center">Nullam lobortis, turpis lobortis
                            placerat
                            vehicula, ipsum lacus bibendum dolor, sit amet pretium odio magna eget risus. Phasellus
                            iaculis
                            ultricies duiNullam lobortis, turpis lobortis placerat vehicula, ipsum lacus bibendum dolor,
                            sit
                            amet pretium odio magna eget risus.</p>
                    </div>
                </div>
            </div>

            <div class="container-fluid p-0 blog_gallery">

                <div class="row no-gutters">

                    <div class="col-3">
                        <img class=" w-100" src="img/blog/blog_gallery_item_1.jpg" alt="blog_picture_1">
                    </div>

                    <div class="col-3">
                        <img class=" w-100" src="img/blog/blog_gallery_item_2.jpg" alt="blog_picture_2">
                    </div>

                    <div class="col-3">
                        <img class=" w-100" src="img/blog/blog_gallery_item_3.jpg" alt="blog_picture_3">
                    </div>

                    <div class="col-3">
                        <img class=" w-100" src="img/blog/blog_gallery_item_4.jpg" alt="blog_picture_4">
                    </div>

                </div>

                <div class="row no-gutters">

                    <div class="col-3">
                        <img class=" w-100" src="img/blog/blog_gallery_item_1.jpg" alt="blog_picture_5">
                    </div>

                    <div class="col-3">
                        <img class=" w-100" src="img/blog/blog_gallery_item_2.jpg" alt="blog_picture_6">
                    </div>

                    <div class="col-3">
                        <img class=" w-100" src="img/blog/blog_gallery_item_3.jpg" alt="blog_picture_7">
                    </div>

                    <div class="col-3">
                        <img class=" w-100" src="img/blog/blog_gallery_item_4.jpg" alt="blog_picture_8">
                    </div>

                </div>

             </div>

</section>

Если присвоить картинке класс .h-100 то она растягивается и выглядит это всё не очень красиво, нужен совет, как сделать правильно именно на bootstrap?

Comments

[Rustam Bainazarov]

У меня есть один совет — делайте без Bootstrap.

[Виктор Таран]

Рустам Байназаров, у меня другой, учи бутстрап и не говори чуши.
вариантов сверстать блок миллион
НО для начала не делай говна, а в частности не вставляй контент несоразмерный блоку.
Вот такая гадость потом остаться на продакшене в виде 44 мегабайтных а особо упоротые по 100 МБ страниц. Реж нормально картинки 1 к 1 будет тебе счастье. Поверь мне программисту загружаемый контент в смс подрезать в нужный размер проблемы не будет.

[Rustam Bainazarov]

Виктор Таран, мда. Ну тогда вам, программисту, ничего не стоит сделать такую простую вещь, как у вас на картинке.

Для затравки: 4 колонки на flex'ax, картинки внутри — на абсолютное позиционирование и object-fit: cover.

А сайты на Bootstrap — это только проекты на отвали или сайты региональных контор.

[Виктор Таран]

Рустам Байназаров, сайты на бутстрап это 80% всех сайтов поскольку ВСЕ cms его используют как основной фреймворк в штатной комплктации, может конечно и есть исключения но по факту бутстрап стандарт, если вы застряли в 2008 году, то конечно да.
Примеров таких блоков в интернете просто миллион, вообще не понятно почему бы просто не поискать.

[Rustam Bainazarov]

Виктор Таран, а мне-то нафига это писать? Я не автор вопроса, я не использую Bootstrap, мне сверстать такой блок — 5 минут с нуля со всеми стилями

В любой нормальной западной компании никакого Bootstrap'а не используют. Либо вы не собирали относительно крупный проект с уникальным дизайном. К примеру, никто в моей команде не использует Bootstrap, потому что он не масштабируется нормально.

Судя по всему вёрсткой вы не занимаетесь, если говорите, что только на Bootstrap можно сделать что угодно. Либо верстаете простые макеты с простой сеткой, для которых и предназначен Bootstrap, ибо это готовый фреймворк. И как любое универсальное решение — оно требует сильные доработки под нужды проекта. Проще с нуля сделать.

Если бы я до сих пор ваял простые лендинги по 100 тысяч рублей, то я бы, наверное, и использовал Bootstrap.

А касательно вопроса — я писал автору вопроса о том, что я не понимаю, почему надо озираться на грёбаный Bootstrap постоянно и пытаться из него что-то слепить, когда сверстать с нуля такую секцию — дело 5-ти минут. Как только что-то в Bootstrap'е нет готового — всё, блин, ступор. Как же сделать эту простейшую секцию, LOL… Bootstrap запрещает сделать свои классы и CSS-правила для них, что ли?

[Богдан Олийник]

Рустам Байназаров, сразу скажу что я знаю как сделать эту секцию без bootstrap. Но по-моему я спрашивал конкретно о том как сделать именно этим инструментом, так как я его изучаю. Но это уже не имеет значения, я уже всё сделал)

Answer 1

[noeer]

Нужно соблюдать пропорции для изображений и верстать без .h-100

Answer 2

[BohdanK]

Если пропорции картинок не предусмотрены изначально, то можно её растягивать пропорционально без искажений, как вариант сделать картинку фоном, убрать тег img, добавить тег к примеру:

.image-container {
         background-size: cover;
         background-position: top center;
 }

Тогда картинка растянется так как вам нужно, при условии что .image-container будет иметь заданную высоту.