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>

一切似乎都运行良好，但是当我在浏览器上调整窗口大小时，图像会“切断”，“主文字”区域也是如此。我试图谷歌搜索找出原因：但是，到目前为止还没找到。

如果有人能指出如何在窗口调整大小时避免剪切图片，我将不胜感激。

很抱歉，如果这是一个html / css 101问题：我对网络编程很新！

Answer 1

如果我理解正确，图像会被截断，因为它们是背景图像......也就是说，它们不是占据页面空间的元素。

如果您想避免切断图像，则需要在height s上明确设置width和div ...这些数字与{{1}匹配}和height图像。

Answer 2

如果您正在调整浏览器窗口的大小，当您向右水平滚动时，背景会中断？这是块元素中常见的错误，它具有100％的浏览器宽度。修复使用最小宽度：[页面宽度，即960px]。

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

在css中自动调整图片大小

2 个答案: