Постоянно размещать текст в центре изображения независимо от высоты

Question

Я пытаюсь создать сетку портфолио, состоящую из элементов div, в которых содержится изображение с текстом внизу. Я хочу, чтобы интервал между текстом соответствовал центру изображения независимо от его высоты (поскольку они различаются).

В настоящее время выглядит так: https://gyazo.com/21c53003306409e19d23dad3cb470c29

Но мне бы хотелось, чтобы это выглядело так: https://gyazo.com/68404d8c6e07f5c37d60ecd05d844fbf

Способ, которым я достиг примера, который я хочу, чтобы он выглядел, заключается в установке «margin: -37px», но у него есть 2 проблемы, во-первых, мне нужно будет установить это для каждой функции изображения / тематического исследования. Во-вторых, по мере того, как я изменяю размер, текст постепенно теряет четкость по мере того, как изображения корректируются, делая дисперсию 37px больше не правильной.

Не уверен, есть ли простое решение или нет. Я хочу, чтобы изображения оставались одного размера, но не могли контролировать размеры исходного файла.

// .case-container {
//     display: flex;
//     width: 1200px;
//     margin-top: 100px;
//     margin-bottom: 100px;
//     text-align: center;
//     justify-content: space-between;
//     flex-wrap: wrap;

//     @media (max-width: 1330px) {
//     width: 80%;
//     } 

    
// }

// .header-row {
//     width: 100%;
// }

// .case-column {
    
// }

// .case-image {
   
//     width: 400px;
//     height: 400px;
//     justify-content: center;
//     align-items: center;
    
// }



// .image-cover {
//     width: 100%;
// }


// .case-container {
//     max-width: 1400px;
// }

// .header-row {
//     flex: 1;
//     text-align: center;
// }

// .case-columns {
//     display: flex;
//     text-align: center;
//     justify-content: space-between;
//     align-items: center;
//     flex-basis: 40%;
// }



// .case-column-1 {    //This controls how much each case will take up of the column compared to the other column
//     flex: 1;
//     display: flex;
//     flex-direction: column;
// }

// .case-column-2 {    //This controls how much each case will take up of the column compared to the other column
//     flex: 1;
//     display: flex;
//     flex-direction: column;
// }

// .case-1 {   //This controls how much each case will take up of the column
//     flex: 1;
// }

// .case-2 {   //This controls how much each case will take up of the column
//     flex: 1;
// }

// .case-image { //This controls the image size
//     width: 100%;
// }


.case-container {
    max-width: 1000px;
    min-width: 400px;
    margin-top: 100px;
    margin-bottom: 100px;
    text-align: center;
    justify-content: center;
}

.case-row {
    display: flex;
    justify-content: space-between;
    padding-bottom: 50px;
}

.feature-case {
    // flex-direction: column;
    // align-items: space-between;
    flex-basis: 48%;
    flex: 1;
}

.case-image {
    padding-bottom: 30px;
}

.inner-case-image {
    width: 75%;
}

.case-text {
    align-items: flex-end;
}

<div class="case-container">
            <div class="header-row">
                <h3>Case Studies</h3>
            </div>

            <div class="case-grid">
                <div class="case-row">
                    <div class="feature-case">
                        <div class="case-image">
                            <img class="inner-case-image" src="https://i.gyazo.com/16aff212400b8d6de10246f5003116e0.png" alt="">
                        </div>
                        <div class="case-text">
                            <h4>UI/UX | MOBILE APP</h4>
                            <h3>Conseris Data Collection App</h3>
                        </div>
                    </div>

                    <div class="feature-case">
                        <div class="case-image image-spacing">
                            <img class="inner-case-image" src="https://i.gyazo.com/0573b6396a2447858cc65723f391933a.png" alt="">
                        </div>
                        <div class="case-text">
                            <h4>UI/UX | MOBILE APP</h4>
                            <h3>Conseris Data Collection App</h3>
                        </div>
                    </div>
                </div>

                <div class="case-row">
                    <div class="feature-case">
                        <div class="case-image">
                            <img class="inner-case-image" src="https://i.gyazo.com/16aff212400b8d6de10246f5003116e0.png" alt="">
                        </div>
                        <div class="case-text">
                            <h4>UI/UX | MOBILE APP</h4>
                            <h3>Conseris Data Collection App</h3>
                        </div>
                    </div>

                    <div class="feature-case">
                        <div class="case-image">
                            <img class="inner-case-image" src="https://i.gyazo.com/0573b6396a2447858cc65723f391933a.png" alt="">
                        </div>
                        <div class="case-text">
                            <h4>UI/UX | MOBILE APP</h4>
                            <h3>Conseris Data Collection App</h3>
                        </div>
                    </div>
                </div>
            </div>

            <div class="case-button">

            </div>


        </div>

Код грязный, так как я только начинаю свое первое настоящее создание полного сайта.

Answer 1

Я проверял это, мой друг, проблема здесь в фотографиях. Даже при установке максимальной высоты для case-row и feature-case проблема все еще была.

Исправлено, когда я установил максимальную высоту для картинки, как вы можете видеть ниже:

 .inner-case-image {
   width: 75%;
   max-height: 350px;
 } 

Проверьте это.

Answer 2

Установите значение max-height для класса 'case-image', соответствующее высоте вашего самого короткого изображения.