如何防止圖像縮放窗口

當移動

即時通訊目前正在開發這個網站http://digitalgenesis.com.au/projects/sister/music.html

會發生什麼，當我重新大小的屏幕是它最終與控股頁面標題DIV內容碰撞而行跳到下入錯位置如何防止圖像縮放窗口

http://digitalgenesis.com.au/projects/sister/img/screen.png

我希望做的是有它只是阻止它擊中頁面

上的文字之前210所關於如何做到這一點

這裏任何人都可以提出建議是HTML

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css" /> 
<link rel="stylesheet" type="text/css" media="screen" href="css/reset.css" /> 
     <title></title> 
</head> 

<body> 
<div id="wrap"> 


<div id="musicbox"> 
<div id="musicheader">Music</div> 

<div id="musicline"></div> 
<div id="musiccontent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan nunc vel odio faucibus euismod. Nulla semper lorem vel risus volutpat congue. Sed eleifend velit eget mauris luctus in imperdiet eros ultricies. Ut et gravida ligula. Vestibulum placerat placerat bibendum. Vestibulum pretium mollis arcu, et pharetra est sagittis sed. Vestibulum facilisis elementum urna vel fermentum. Vestibulum id metus at magna tristique ornare in id lorem. Nulla rhoncus, neque ac scelerisque varius, felis enim convallis ipsum, sed auctor libero dolor in ligula. Vivamus rhoncus, sapien non feugiat tempus, tortor enim euismod dolor, ac placerat ante enim sed diam. </div> 
</div> 


</div> 

<div id="musicimg"><img src="img/katrina.jpg" alt="#" /></div> 



</body> 
</html>

而CSS是

@font-face { 
    font-family: 'CodeLightRegular'; 
    src: url('../fonts/code/code_light_copy-webfont.eot'); 
    src: url('../fonts/code/code_light_copy-webfont.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/code/code_light_copy-webfont.woff') format('woff'), 
     url('../fonts/code/code_light_copy-webfont.ttf') format('truetype'), 
     url('../fonts/code/code_light_copy-webfont.svg#CodeLightRegular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 

} 


#wrap{width:960px; margin:0 auto;} 



#musicheader{font-size:120px; font-family: 'CodeLightRegular'; } 
#musicbox{float:left; width:519px; } 
#musicline{height:4px; background:black; } 
#musicimg{float:right; width:441px; } 
#musiccontent{width:120%;} 

#clear{clear:both;}

來源

2011-07-05 user828919

你有沒有考慮過讓她成爲身體的背景圖像，並定位在右上角不重複，而不是作爲頁面中的圖像元素？ –

我還是希望文字能夠與頁面一起展開，假設我將文本div的寬度百分比放大了，它應該展開而不會與圖像重疊正確嗎？ – user828919

@ user828919當窗口太小時，文本會與圖像重疊。如果你要採用背景圖像的方式，我建議你在背景顏色的位置放置文字。 –

HTML5的解決方案將是根據寬度使用媒體查詢對頁面進行不同的樣式設置：

<link rel="stylesheet" type="text/css" media="screen" href="css/base.css" /> 

<link rel="stylesheet" type="text/css" media="screen and (min-width: 960px)" href="css/main.css" />

在

你base.css你將有所有常見的造型加上小屏幕的任何造型。在您的main.css中，您將覆蓋較大的屏幕。

（在您需要先設計時考慮到小屏幕你的CSS，然後添加CSS來使它看起來不錯的大屏幕等字樣。）

更新： -

例如嘗試：

@media screen 
{ 
    body{ 
     background-size: 0; 
    } 
} 
@media screen and (min-width: 645px) 
{ 
    body{ 
     background-size: 20%; 
    } 
} 
@media screen and (min-width: 960px) 
{ 
    body{ 
     background-size: auto; 
    } 
}

來源

2011-07-05 04:00:02

感謝您的支持和建議，不明白我能想出什麼 – user828919

@ user828919如果我沒有足夠的具體情況，請告訴我。有時我會假設每個人都瞭解我。 –

我已更新頁面@ digitalgenesis.com.au/projects/sistercopy/music.html。但是現在我無法在頁面上向下滾動。對於CSS我添加了背景位置：右上角;感謝您的支持到目前爲止，我只是新開發 – user828919

丹說，你可以使用它作爲一個background image與background-position; top:0; right:0; no-repeat &說你娃nt的文字是不重疊的圖像，因爲你可以給min-width

來源

2011-07-05 04:04:22 sandeep

如何防止圖像縮放窗口

回答

相關問題