图片旁边的文字，将文字高度限制为图片高度

Question

所以，我有一张图片，旁边应该有一段预告文字。

文本应在底部淡出并显示“>>”作为进一步阅读指示符 & link。

现在问题来了：文本端应该只和图像一样高。

有什么方法可以将文本列的高度限制为图像的高度并将淡出和 link 放在底部吗？

.su-post-img
{
  float: left;
    display: block;
    max-width: 67% !important;
    height: auto !important;
}

.su-post-excerpt
{
}

.su-post-title
{
    text-transform: uppercase;
    font-size: xx-large !important;
}


.fadeout {
    position: relative; 
    bottom: 4em;
    height: 4em;
    background: -webkit-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    ); 
    background-image: -moz-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
    background-image: -o-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
    background-image: linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
    background-image: -ms-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
}

<div class="su-post columns">
  <div class="column su-post-img"><img src="https://lh3.googleusercontent.com/DSBmG1Tl65XysmdiC92sBuA4WQImAqViuKo1zZD9ZGgOpKTnR0hp3EoJW1MlX8JWKLwXdxvZYgcz_HM4WN1uWVKslNkgXeEbtWfP=w234-h160-l80-sg-rj-c0xffffff">
    </div>
            
  <div class="column">
  <section>
    <h2 class="su-post-title">This is the title</h2>
    <div class="su-post-excerpt">
      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. derit 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.
            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. derit 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.
      <div class="fadeout"></div>   
    </div>
                
    <a href="www.google.com">>></a>
    </section>
  </div>
        
</div>

更新：

@Terminator-Barbapapa 的出色回答解决了我的问题。

我在答案中添加了一些 JS 以允许动态图像高度。

这是我的完整解决方案：

// Set height of text column in post to height of image.
function AdjustTextHeight()
{
    if (jQuery('.su-post-img').css("flex-basis") != "100%")
    {
        var height= document.getElementById('post-thumb').offsetHeight;
        document.getElementById('post-text').style.maxHeight=height.toString() + "px";  
    }
}                   

// add to events
$(window).resize(function() 
{
    AdjustTextHeight();
});

$(document).ready(function() 
{
    AdjustTextHeight();
});

.post
{
  display: flex;
}

.post-img img {
  flex-basis: 35%;
  overflow: hidden;
}

.post-text
{
  flex-basis: 65%;
  overflow: hidden;
  position: relative;
}

.post-text::before {
  content: '';
  width: 100%;
  height: 5em;
  bottom: 0;
  position: absolute;
  display: block;
  background-image: linear-gradient(transparent, white 70%);
}

.post-continue {
  position: absolute;
  bottom: 0;
  left: 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="post">
  <div class="post-img">
    <img id="post-thumb" src="https://lh3.googleusercontent.com/DSBmG1Tl65XysmdiC92sBuA4WQImAqViuKo1zZD9ZGgOpKTnR0hp3EoJW1MlX8JWKLwXdxvZYgcz_HM4WN1uWVKslNkgXeEbtWfP=w234-h160-l80-sg-rj-c0xffffff">
  </div>
            
  <div id="post-text" class="post-text" >
  
    <h2>This is the title</h2>
    <div class="post-excerpt">
      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. derit 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.
            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. derit 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.
                

    </div>
    <a class="post-continue" href="www.google.com">>></a>  
        
  </div>

</div>

希望这对其他人有帮助！

Answer 1

使用 flex 将您的列并排放置。并根据图像的高度应用 max-height。您还可以使用 ::before 伪元素轻松创建 fade-out，因此您不需要额外的 HTML 标记。将 link absolute 放在 section.

的底部

.columns {
  display: flex;
}

.column { 
  min-width: 200px;
  max-height: 200px;
  overflow: hidden;
  position: relative;
}

.su-post-img img {
  height: 200px;
}

.su-post-title {
  text-transform: uppercase;
  font-size: xx-large;
}

section::before {
  content: '';
  width: 100%;
  height: 5em;
  bottom: 0;
  position: absolute;
  display: block;
  background-image: linear-gradient(transparent, white 70%);
}

section a {
  position: absolute;
  bottom: 0;
  left: 0;
}

<div class="su-post columns">
  <div class="column su-post-img"><img src="https://lh3.googleusercontent.com/DSBmG1Tl65XysmdiC92sBuA4WQImAqViuKo1zZD9ZGgOpKTnR0hp3EoJW1MlX8JWKLwXdxvZYgcz_HM4WN1uWVKslNkgXeEbtWfP=w234-h160-l80-sg-rj-c0xffffff">
    </div>
            
  <div class="column">
  <section>
    <h2 class="su-post-title">This is the title</h2>
    <div class="su-post-excerpt">
      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. derit 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.
            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. derit 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.
      <div class="fadeout"></div>   
    </div>
                
    <a href="www.google.com">>></a>
    </section>
  </div>
        
</div>

图片旁边的文字，将文字高度限制为图片高度

Text next to image, limit text height to image height

css

image

height