Question

我将尝试使声音听起来尽可能简单。

我试图并排放置2个div容器，并使它们始终处于相同的高度。

右div将是常规文本。由于我计划将其用于不同的页面，因此此处的文本量会有所不同。

左div将由2个较小的容器组成-标题栏和其下方的图片块。

这是我要实现的目标的直观示例。绿框应该是完整的照片

Example Photo

我希望左侧图像块中的照片占据盒子的整个高度/宽度-（类似于background-position：CSS中使用的封面）。我宁愿使用常规的img标签，而不是将其设置为div背景。

我遇到的问题是，左侧的图像高度优先于右侧的文本框，并且导致两个容器的显示时间都比我想要的长得多。我希望对右侧的文本块进行优先排序，然后图像块将基于该文本块改变高度。

我尝试使用对象适配：包含，但是不幸的是，它无法正常工作。我得到的最接近的宽度是使用宽度：100％，但是这会使高度过大。

这是我到目前为止所拥有的：

.main {
    display: flex;
    }

.main .left {
    width: 40%;
    float: left;
    }

.main .left .title {
    background-color: black;
    text-align: center;
    display: block; 
    height: 90px;
    padding: 50px;
    color: white;
    font-size: 40px;
}
.photo {
    height: auto;
    width: 100%;
    }

.photo img {
    width: 100%;
    }

.main .right {
    width: 60%;
    float: right;
    }

<div class="main">

    <div class="left">
        <div class="title">This is my Title</div>
        <div class="photo"><img src="https://image.shutterstock.com/z/stock-photo-pastoral-green-field-with-long-shadows-in-tuscany-italy-275372477.jpg"></div>
    </div>

    <div class="right">
        <p>text goes here lalalalalala</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>

</div>

Answer 1

<style> 
.main {
    display: flex;
    }

.main .left {
    width: 40%;
    display: flex;
    flex-direction: column;
    }

.main .left .title {
    background-color: black;
    text-align: center;
    display: block; 
    height: 90px;
    padding: 50px;
    color: white;
    font-size: 40px;
}
.photo {
    width: 100%;
    overflow: hidden;
    position: relative;
    flex-grow: 1;
    }

.photo img {
    width: 100%;
    position: absolute;
    }

.main .right {
    width: 60%;
    }
</style>

注意：

我对图像进行了绝对定位，以使其自身的高度不会拉伸柔韧性行。
正在按高度裁剪图像。如果标题比文本高（或相同高度），则根本看不到图像。
我使左列也显示flex，并且使照片框flex增大，以便标题可以保持相同的高度，并且照片框将拉伸其余部分以匹配右列。
对于弹性项目，我们不需要向左/向右浮动。

使图像占据改变尺寸的div的整个高度？

1 个答案: