javascript - CSS能否使图片放大到窗口大小
ringa_lee
ringa_lee 2017-04-10 14:52:05
0
6
557

加了max-width:100%能够使大图片缩小到窗口大小,那么如何设置能使小图片放大到窗口大小呢。还是必须得用js来做这个事?

ringa_lee
ringa_lee

ringa_lee

reply all(6)
刘奇

1.图片方式

img{
    width: 100%;
    height: auto;
}

2.背景图+background-size
此处利用padding-top的百分比特性

.img{
    padding-top: 图片高度/图片宽度 * 100%;
    background-size: 100% 100%;
}
大家讲道理

可以作为其他元素的背景,然后设置background-size

Ty80

直接用 width: 100% 不行嗎?

max-width: 100%;
min-width: 100%;

等於 width: 100%

左手右手慢动作

CSS实现响应式全屏背景图

PHPzhong

background-size: cover;

小葫芦

html {
width: 100%;
height: 100%;
background: url(bg.jpg) no-repeat center center fixed;
background-size: cover;
}


参考资料:http://css-tricks.com/perfect-full-page-background-image/

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template