Question

我有两个共享部分 - 一个由文本组成的标题，一个浮动到右边的图像。我希望图像宽度始终为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置于相对位置，并将溢出隐藏在此处＆amp;给图像一个绝对的位置。您可能还需要在文本持有者上给予一些边距权限，以确保它不会落后于图像。

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

Answer 2

最简单的方法是使用与background-image对齐的右上角no-repeat。

Answer 3

如果您的图片不需要是img标记，则可以将其作为背景图片应用于标题。但我认为情况并非如此。

尝试：

.location img {
  position:absolute;
  clip:rect(0px,60px,200px,0px);
}

http://www.w3schools.com/cssref/pr_pos_clip.asp

[编辑]

很抱歉，请尝试clip: rect(0px, 308px, 100%, 0px);，我很确定您需要将图片悬浮在内标题中。

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

3 个答案: