html如何使图片适应当前浏览器可见分辨率

html-css034

html如何使图片适应当前浏览器可见分辨率,第1张

让图片适应当前浏览器而且居中,一般使用CSS的背景图来做,示例代码如下:

<style>

div{background:url(图片地址) center top no-repeatheight:100px}

</style>

<div>这里是内容</div>

background 简写属性在一个声明中设置所有的背景属性。

可以设置如下属性:

background-color        规定要使用的背景颜色。

background-position   规定背景图像的位置。

background-size           规定背景图片的尺寸。

background-repeat      规定如何重复背景图像。

background-origin

background-clip

background-attachment

background-image     规定要使用的背景图像。

如果不设置其中的某个值,也不会出问题,比如 background:#ff0000 url('smiley.gif')也是允许的。

你的分辨率1920*1080,,但是浏览器展示宽度没有这么大,要去掉右侧的滚动条,上面的菜单栏还有下面的任务栏。你的背景图想要全部显示,而且不怕变形的话,可以设置成background-size:100%如果怕变形的话,只能background-position:center center

*{

padding:0

margin:0

}

.div1{

width:100%

max-width:1440px

height:600px

margin:0 auto

background:url(1440.jpg) no-repeat center center/1440px 600px

}

<div class="div1"></div>