html图⽚拉伸整个页⾯,css如何让图⽚拉伸?
css设置图⽚拉伸的⽅法:1、使⽤width与height属性强制设置图⽚⼤⼩使图⽚拉伸。2、使⽤background-size属性拉伸背景图⽚。
1、强⾏设定⼤⼩值会导致拉伸
⽰例://html
....
//css
img{
width: 80px;
height: 80px;
margin-right: 10px;
}
效果图:
2、使⽤background-size 属性拉伸背景图⽚
语法:background-size: length|percentage|cover|contain;
属性值:值描述
length设置背景图像的⾼度和宽度。
第⼀个值设置宽度,第⼆个值设置⾼度。
如果只设置⼀个值,则第⼆个值会被设置为 "auto"。
percentage以⽗元素的百分⽐来设置背景图像的宽度和⾼度。
html如何设置图片滚动第⼀个值设置宽度,第⼆个值设置⾼度。
如果只设置⼀个值,则第⼆个值会被设置为 "auto"。
cover把背景图像扩展⾄⾜够⼤,以使背景图像完全覆盖背景区域。
背景图像的某些部分也许⽆法显⽰在背景定位区域中。
contain把图像图像扩展⾄最⼤尺⼨,以使其宽度和⾼度完全适应内容区域。⽰例:
div
{
background:url(/i/bg_flower.gif);
background-size:35% 100%;
-moz-background-size:35% 100%; /* ⽼版本的 Firefox */
background-repeat:no-repeat;
}
这是⼀个段落。
这是⼀个段落。
这是⼀个段落。
这是⼀个段落。
这是⼀个段落。
这是⼀个段落。
这是⼀个段落。
这是⼀个段落。
这是⼀个段落。
效果图:

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