1. 首頁
  2. 問答
  3. 高度圖像不匹配div在不同的分辨率

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

2012-04-02 69 views
0

我正在建立一個網頁，它應該適應所有的決議。 我認爲對於我定義每個元素的百分比，頁面將打開不同的分辨率元素將相對於頁面大小。 如果我錯了，我不知道有多準確或正確，請糾正我。 因爲我以百分比爲單位處理大小。 我在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

回答

1

網頁可以適應不同的分辨率，這些被稱爲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

相關問題

 相關問題