2 sinat 32546159 sinat_32546159 于 2016.03.04 17:36 提问

背景图随着容器的宽度的改变而自动调整大小,并始终完全显示

插入一幅背景图像,如何让它随浏览器自动调整大小,始终保持完全显示?

2个回答

showbo
showbo   Ds   Rxr 2016.03.04 18:09
已采纳

用会h5的background-size:100%,IE8-不支持,要兼容ie8-思路就是父容器relative定位,放个img加载图片,absolute定位,

<div style="background-image:url(http://avatar.csdn.net/E/8/7/2_sinat_32546159.jpg);background-size:100%;height:300px;width:300px">
    H5 CSS background-size
</div>

<div style="position:relative;height:300px;width:300px">
    兼容IE8-和所有浏览器
    <img src="http://avatar.csdn.net/E/8/7/2_sinat_32546159.jpg" style="width:100%;height:100%;z-index:-1;position:absolute;left:0;top:0"/>
</div>
WinsenJiansbomber
WinsenJiansbomber   2016.03.05 15:36

样式表

html, body, #image_target {width:100%,height:100%;}
#image_target {position:absolute;top:0;left:0;}

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
背景图片有边框线条. 内容自动适应. 自动随窗口宽度的改变而改变.
如下效果图. 这个图片的边框.宽度随浏览器的宽度而变化. 内容也按照原定比例缩小.   style> .yiguoqi,.weishiyong,.yiguoqi{ background-size: 100%; /*关键点*/ background-repeat: no-repeat; bac
如何使JTextArea随着窗体的变化自动调整大小
import java.awt.*; import javax.swing.*; public class TextAreaTest { public static void main(String[] args) { TextAreaFrame frame = new TextAreaFrame(); frame.setDefaultCloseOper
[css]CSS如何让DIV的宽度随内容的改变而改变
让div根据内容改变大小 div{ width:auto; display:inline-block !important; display:inline; }
解决背景图片随屏幕大小变化的问题
今天的工作进度有点慢,我发现最主要的原因是html标签的属性的作用不熟悉。 特别是,在做页面背景图片可随浏览器窗口大小调整时,我的基础知识运用不熟练的缺点就表现出来了。 例如:今天下午做的页面背景时,由于图片过大,直接引用时,导致屏幕无法显示完全。 实际解决它的方法很简单: .bgimage{ position:fixed;z-index:-1;//这两句时最重要
Delphi让控件随着窗口的大小而改变
Delphi让控件随着窗口的大小而改变 方法1:设置Anchors属性,把akLeft,akTop,akRight,akBottom都设为True. 方法2:设置Align属性,其值为alClient.
如何让select下拉框随着内容改变大小
111      22222      33333333      44444444444      555555555555555                function resetSelectWidth(obj){     var tempObj=document.createElement("select");     tempObj.length=1;    
C# ListView随窗体大小自动改变列宽
转自:http://www.zdexe.com/program/201101/1342.html ListView控件详细表示时,需要调节所有项目文本的列宽至全部表示,可能通过设定列的ColumnHeader对象的Width属性为负数的值实现。 根据项目的文本自动调节 下面的例子是,ListView控件ListView1的所有列宽自动调节的设定。 [C#] //Lis
在编写网站的时候,给一个div设置背景图片,怎么让这个图片随着div大小的改变,而等比例的缩放。
在编写网站的时候,给一个div设置背景图片,怎么让这个图片随着div大小的改变,而等比例的缩放。? background: url(**); background-size: cover; background-position: center center;   v+="";                   
MFC如何让背景图随窗口大小改变
刚开始做的时候,我理所当然的想,直接在OnPaint函数中改变图片的大小,但是发现,这样会导致图片出现如下现象: 这是因为多次重复地更新同一区域,导致图片看起来重叠了,也可以这样理解,因为没有使客户区无效,所以OnPaint再重绘的时候不会先把原来的背景擦出,从而覆盖上去,出现重叠。所以由此可以想到解决办法,那就是在别的函数中使用Invalidate()函数使客户区矩形区域无效,然后通知重绘,这时
C#控件随着窗口大小变化而自动变化
在设计可供用户调整大小的窗体时,如何实现该窗体上的控件也应能正确地随窗体的改变而自动调整大小并且能重新定位?此时就要借助控件的.Anchor属性。Anchor属性定义控件的定位点位置。当控件锚定到某个窗体时,如果该窗体的大小被调整,那么该控件维持它与定位点位置之间的距离不变。例如,如果“:Button”控件锚定到窗体的左、右和底边缘,那么当调整该窗体的大小时,Button控件水平调整大小,维持到该