实现背景图片自适应

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    /***作为背景图片时***/
        .hbcwwdjod{
            height:1280px;
            background:url("IMG_1469.JPG") no-repeat;
            background-size: 100%;}
        .hbcwwdjod2{
            height:300px;background:url("IMG_1405.JPG") no-repeat center;
            background-size: 500px 300px; }
      /****作为图片***/      
     .img-responsive {
        display: inline-block;
        height: auto;
        max-width: 100%;
    }
    </style>
</head>
<body>

<div class="hbcwwdjod"></div>
<div class="hbcwwdjod2"></div>


<div class="hbcwwdjod"><p align="center">
    <img src="indexbg.jpg" alt="" class="img-responsive">
</div>

</body>
</html>