Question

我正在尝试创建一个包含div的投资组合网格，这些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

在“案例图像”类上设置与您最短图像的高度相匹配的最大高度。

Answer 2

我测试了我的朋友，这里的问题是图片。即使为案例行和要素案例设置了最大高度，问题仍然存在。

当我为图片设置最大高度时，将其修复，如下所示：

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

测试一下。

不论高度如何，始终在图像中心间隔文本

2 个答案: