CSS/Jquery图片自适应的几种方式

最近开始复习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});
        })
})