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

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

基本上，我只为div，图像和行高设置了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'));

希望这有帮助，欢呼！

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

2 个答案: