最近开始复习web前端的基础,顺带刷一波freecodecamp…
方法一:
如果用的是img标签很方便可以自适应:
img{
width:100%;
height:auto;
}
(根据需要可以设置max-width;高度设不设看情况,一般都是等比缩放的)
Bootstrap可以加img-responsive类);
方法二:
如果用的是background加的背景图片
利用margin和padding将div撑开。要设置成百分比
.pic{
padding-bottom:x%;
width:100%;
background:url()no-repeat center center;
background-size:cover;
}
利用padding不会对html结构做出太大的变动,而利用margin需要在pic那个div外面再嵌套一个div。
<div class=”outer”>
<div class=”pic”>
</div>
</div>
.outer{
height:100%;
background:url()no-repeat center center;
background-size:cover;
}
.pic{
margin-bottom:x%;
}
方法三:
jquery来实现图片自适应,还是以背景图片的形式加入
$(function(){
$(widow).resize(function(){
var width=$(window).width();
var height=width*0.5;
$(‘.pic’).css({“width”:width,”height”:height});
})
})