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

我有两件事情共享部分 - 一个由文本组成的头部，一张浮动在其右侧的图像。我希望图像宽度始终为308px，并根据文本长度的需要裁剪其高度。我没有兴趣为.location设置固定高度，因为内容长度可能会改变。如何才能做到这一点？（谢谢！）CSS - 裁剪图像高度以匹配文本长度

的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; 
}

来源

2013-03-26 pianofighter

替代解决方案，以使用背景图片，如果你想这是一个实际的<img>标签将定位.location相对，保持溢出隐藏在这里&给图像的绝对位置。您可能还需要在文本持有者上留出一些保证金，以确保它不会落在图片后面。

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

来源

2013-03-26 23:15:36

有趣！如何用这种技术来限制图像尺寸？ – pianofighter 2013-03-26 23:45:48

现在明白了。谢谢！ – pianofighter 2013-03-27 00:36:59

最简单的方法是使用对齐到右上角有一个no-repeatbackground-image。

来源

2013-03-26 23:13:38 rcdmk

男人，我希望我能做到这一点，但它必须是一个带有锚标记的img。 – pianofighter 2013-03-26 23:32:49

如果您的图像不需要是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);我敢肯定你会需要有像漂浮你的头里面。

来源

2013-03-26 23:13:43

好奇。谢谢！图像确实需要是一个包裹在锚标签中的img。 – pianofighter 2013-03-26 23:50:03

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

回答

相关问题