html图⽚⾃动适应,css如何让图⽚⾃适应？
要使图⽚能够⾃适应显⽰，我们⼀般可以通过设置CSS样式，让图⽚作为⽗元素的背景图⽚，再设置相关属性来实现。下⾯我们来看⼀下使⽤css设置图⽚⾃适应的⽅法。
css设置图⽚⾃适应⽰例：
HTML代码：
title
css代码：#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;
html如何设置图片滚动
-
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;
上⾯这句的意思就是图⽚的位置，居中，靠左对齐。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。