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

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

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>

来源

2012-04-02 israel love php

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

基本上，我只是为div，图像和控制文本行高度的行高设置了50px的静态高度。

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

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

你不需要任何的jQuery对于这种布局，我劝你不要使用jQuery改变是不是交互式布局（例如鼠标事件响应等。），并尽可能将所有样式留给CSS。

来源

2012-04-02 07:35:59

你好工作演示：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'));

希望这有助于，干杯！

来源

2012-04-02 07:35:29

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

回答

相关问题