高度图像不匹配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>
答
网页可以适应不同的分辨率,这些被称为fluid布局。但是,这些通常会调整元素的宽度而不是高度,因为所有网页都可以垂直滚动。
基本上,我只是为div,图像和控制文本行高度的行高设置了50px的静态高度。
http://jsfiddle.net/aramk/p2vjf/26/
#thirdLine,
#thirdLine img {
height:50px;
line-height:50px;
}
你不需要任何的jQuery对于这种布局,我劝你不要使用jQuery改变是不是交互式布局(例如鼠标事件响应等。 ),并尽可能将所有样式留给CSS。
答
你好工作演示: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'));
希望这有助于,干杯!