Question

大家好我想制作一个主页，背景上有一个全屏图像，周围有一个边框。

我已经能够做到这一点，你可以从这个jsfiddle看到

但我希望当分辨率较小或分辨率小于979px时，边框会缩小。

我使用此脚本制作边框：

    <script>
$theBorder=35; //border around image (change top and left values of #bg accordingly)
$bg=$("#bg");

$bgimg=$("#bg #bgimg");

$preloader=$("#preloader");
//]]> 

$(window).load(function() {
    FullScreenBackground($bgimg,$bg);

    $(window).resize(function() {
        FullScreenBackground($bgimg,$bg);
    });
});

$bgimg.load(function() {
    var $this=$(this);
    FullScreenBackground($this,$bg);
    $preloader.fadeOut("fast");
    $this.delay(200).fadeIn("slow");
});

function FullScreenBackground(theItem,theContainer){
    var winWidth=$(window).width();
    var winHeight=$(window).height();
    var imageWidth=$(theItem).width();
    var imageHeight=$(theItem).height();
    var picHeight = imageHeight / imageWidth;
    var picWidth = imageWidth / imageHeight;
    if ((winHeight / winWidth) < picHeight) {
        $(theItem).css("width",winWidth);
        $(theItem).css("height",picHeight*winWidth);
    } else {
        $(theItem).css("height",winHeight);
        $(theItem).css("width",picWidth*winHeight);
    };
    $(theContainer).css("width",winWidth-($theBorder*2));
    $(theContainer).css("height",winHeight-($theBorder*2));
    $(theItem).css("margin-left",(winWidth- $(theItem).width())/2);
    $(theItem).css("margin-top",(winHeight- $(theItem).height())/2);
}
</script>

感谢您的帮助！

Answer 1

希望这会对你有所帮助。

    <html>
    <head>
    <title>Welcome !</title>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    
    <style type="text/css">
      body{
        margin:0;
        padding: 0;
      }
    
      .maindiv{
        width: 100%;
        height: 100%;
        background-color:black;
        position: absolute;
        background-image: url(http://3.bp.blogspot.com/-dwPiL6_mLUo/UzPrdohyk0I/AAAAAAAADds/LNvY6Hyp4Tc/s1600/Programmer+HD+Wallpaper+by+PCbots.png);
        background-position: center;
        display: none;
    
    
      }
    
    </style>
    
    
     <body>
    
    <div class="maindiv"></div> 
    
    <script type="text/javascript">
      $(document).ready(function(){
        $(".maindiv").fadeIn(4000)
      });
    
    </script>
    
     </body>
    </html>

注意如果您想在不使用引导程序的情况下放置响应式图像，在div value.or

中将其设为background-image width height和%

提供div

width:anyvalue%;
height:anyvalue%;

然后将image放入此div并为您的图片设置

 width:100%;
 height:100%;

Answer 2

响应式css怎么样？

像

这样的东西

<div id="mainimage">
    <div class="img"></div>
</div>

和css：

body{
  margin:0;
  padding:0;
  background:#fff;
}

#mainimage {
  box-sizing: border-box;
  width: 100%;
  height: 300px;
  padding: 20px;
}

@media(max-width: 1300px) {
  #mainimage{
    padding: 10px;
  }
}
@media(max-width: 979px) {
  #mainimage{
    padding: 0px;
  }
}
.img{
  height:100%;
  width: 100%;
  background: url(http://www.piedicosta.com/jnuovo/images/big.jpg) no-repeat center center; 
  background-size: cover;
}

您可以添加转场以使更改更流畅，例如

#mainimage {
  -webkit-transition: all 0.50s ease-in-out;
  -moz-transition: all 0.50s ease-in-out;
  -ms-transition: all 0.50s ease-in-out;
  -o-transition: all 0.50s ease-in-out;
}

带有边框的全屏图像，根据设备分辨率缩小

2 个答案: