加了max-width:100%能够使大图片缩小到窗口大小,那么如何设置能使小图片放大到窗口大小呢。还是必须得用js来做这个事?
ringa_lee
1.图片方式
img{ width: 100%; height: auto; }
2.背景图+background-size 此处利用padding-top的百分比特性
.img{ padding-top: 图片高度/图片宽度 * 100%; background-size: 100% 100%; }
可以作为其他元素的背景,然后设置background-size
直接用 width: 100% 不行嗎?
width: 100%
max-width: 100%; min-width: 100%;
等於 width: 100%
CSS实现响应式全屏背景图
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/
1.图片方式
2.背景图+background-size
此处利用padding-top的百分比特性
可以作为其他元素的背景,然后设置background-size
直接用
width: 100%
不行嗎?等於
width: 100%
CSS实现响应式全屏背景图
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/