html图片自动适应,css如何让图片自适应? |
您所在的位置:网站首页 › css网页背景图片自适应屏幕 › html图片自动适应,css如何让图片自适应? |
要使图片能够自适应显示,我们一般可以通过设置CSS样式,让图片作为父元素的背景图片,再设置相关属性来实现。下面我们来看一下使用css设置图片自适应的方法。 css设置图片自适应示例: HTML代码: titlecss代码:#web_bg{ position:fixed; top: 0; left: 0; width:100%; height:100%; min-width: 1000px; z-index:-10; zoom: 1; background-color: #fff; background-repeat: no-repeat; background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-position: center 0; } 代码分析:position:fixed; top: 0; left: 0; 这三句是让整个div固定在屏幕的最上方和最左方width:100%; height:100%; min-width: 1000px; 上面前两句是让整个div跟屏幕实现一模一样的大小,从而达到全屏效果,而min-width是为了实现让屏幕宽度在1000px以内时,div的大小保持不变,也就是说在这种情况下,缩放屏幕宽度时,图片不要缩放(只有在1000px以内才有效)。z-index:-10; 这个的目的是让整个div在HTML页面中各个层级的下方background-repeat: no-repeat; 上面这个是背景不要重复background-size: cover; -webkit-background-size: cover; -o-background-size: cover; 上面三句是一个意思,就是让图片随屏幕大小同步缩放,但是有部分可能会被裁切,不过不至于会露白,下面两句是为chrome和opera浏览器作兼容。background-position: center 0; 上面这句的意思就是图片的位置,居中,靠左对齐。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |