高度图像与不同分辨率的div不匹配

Question

我正在建立一个网页，它应该适应所有的分辨率。我认为对于我来说，定义每个元素与页面将打开的百分比不同的分辨率元素将相对于页面大小。我不知道如何准确或正确，如果我错了，请纠正我。因为我是以百分比为单位处理大小的。我在div(#thirdLine)中有一个大于图像高度的徽标图像。我想通过css将图像的高度调整为div，这是可能的吗？如果这是不可能的。我在jQuery $('#logo').css('height',$('div.thirdLine').css('height');​中有代码，但无法正常工作。你建议我怎么做呢?谢谢。see example

css代码：

    #thirdLine{
    background-image:url('http://www.centerwow.com/linkguide/guide_files/pic/bacround_lineYellow.png');
    background-repeat:repeat;    
    border-color: #316897;
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    line-height: 7px;
    height:25%;
    color: #745B1B;
    font-family: 'CarterOneRegular';
    font-size: 25px;
    line-height: 34px;
    margin: 0;
    padding: 0;
    text-shadow: 2px 2px 0 #FFF0D8;
    width: auto;
}
#logo{
    border-color: #316897;
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    float:left;
}​

html代码：

<div id="thirdLine"><img id="logo" src="http://www.centerwow.com/linkguide/guide_files/pic/Notebook.png" alt="Link Guide"  />this is div id  thirdLine</div>​

Answer 1

网页可以适应不同的分辨率，这些分辨率称为fluid layouts。但是，它们通常会调整元素的宽度而不是高度，因为所有网页都可以垂直滚动。

基本上，我只将div、image和line-height的静态高度设置为50px，它控制文本的行高。

http://jsfiddle.net/aramk/p2vjf/26/

#thirdLine,
#thirdLine img {
    height:50px;
    line-height:50px;
}

对于这种布局，您不需要任何jQuery，我建议您不要使用jQuery来更改非交互式布局(例如，响应鼠标事件等)。如果可能的话，把所有的样式都留给CSS。

Answer 2

Hiya 工作演示：http://jsfiddle.net/p2vjf/24/ (您可以在jsfiddle中注释掉警报)

你的$("div.thirdline") was undefined和下面的代码将会帮你解决这个问题：

对图像使用max-hieght获取更多信息请阅读此处的非常好的解释：How do I auto-resize an image to fit a div container

Jquery代码

$('#logo').css('max-height',$('#thirdLine').css('height'));

希望这能帮上忙，干杯！