在css中自動調整圖片大小

Question

我已經使用CSS和HTML構建了一個小博客/網頁，但我似乎遇到了一個小問題。我使用CSS插入圖片，並且這樣做的時候，我用下面的：

#blogpic { 
background-image: url(bpic.png); 
display: block; 
background-repeat: no-repeat; 
background-position: center; 
padding-top:275px; 
text-indent:-9999px; 
} 

#maintext { 
background: none repeat scroll 0 0 #F5F5F5; 
margin-top: 75px; 
padding: 15px; 
text-align: justify; 
font-family: 'Ubuntu', sans-serif; font-weight: 400; font-size: 12px; 
margin-left: 18%; 
margin-right: 19%; 
} 

在我的HTML，我有這樣的：

<div id="maintext"> 
<div id="blogpic"></div> 
</div> 

一切似乎都工作正常，但是當我調整在我的瀏覽器窗口中，圖像被「截斷」，「主文本」區域也被截斷。我試着用Google找出原因：但是，迄今爲止還沒有找到。

如果有人能指點我如何避免圖片在窗口大小調整時被切斷，我們將不勝感激。

對不起，如果這是一個html/css 101問題：我很新的web編程！

Answer 1

如果我理解正確，圖像被切斷，因爲它們是背景圖像......也就是說，它們不是佔用頁面空間的元素。

如果你想避免切斷圖像，你需要明確設置在div小號height和width ......與這些數字相匹配的height和圖像的width。

Answer 2

如果您正在調整瀏覽器窗口的大小，並且水平向右滾動，背景會被切斷？這是塊元素中的一個常見錯誤，它具有100％的瀏覽器寬度。該修復程序使用最小寬度：[頁面寬度，即960px]。

http://blue-anvil.com/archives/window-resizemobile-browser-background-bugs/