CSS - 裁剪图像高度以匹配文本长度

Question

我有 2 个共享部分 - 一个由文本组成的标题，以及一个 float 在其右侧的图像。我希望图像宽度始终为 308px，高度根据文本长度的需要进行裁剪。我对为 .location 设置固定高度不感兴趣，因为内容长度可能会随着时间的推移而改变。如何才能做到这一点？ (谢谢!)

HTML:

<section class="location">
<img src="http://evinwolverton.com/img/disc.jpg">
<header>
    <h2>This Is A Headline</h2>
    Etiam porta sem malesuada magna<br/> 
        Mollis euismod. Duis mollis<br/>
        Est non commodo luctus, nisi erat<br/>
        Porttitor ligula, eget lacinia odio<br/>
        Sem nec elit.
</header>
 </section>

CSS:

.location {
    border: 2px solid #ccc;
    overflow: hidden;
    width: 620px;
    color: #666;
    margin: 40px 0;
}

.location header {
    float: left;
    padding: 25px;
    width: 258px;
}

.location h2 {
    margin: 0 0 10px 0;
    font-size: 1.2em;
    color: #333;
}   

.location img {
    float: right;
    width: 308px;
}

Answer 1

使用背景图像的替代解决方案，如果您希望它是实际的 <img>标签将位于 .location 位置相对的，将溢出隐藏在这里并给图像一个绝对位置。您可能还需要在文本支架上留出一些边距，以确保它不会位于图像后面。

.location {
    position: relative;
    overflow: hidden;
}
.location img {
    position: absolute;
    top: 0px;
    right: 0px;
}