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

Question

大家好我想做一个主页，背景是全屏图片，四周有边框。

正如您从这个 jsfiddle 中看到的那样，我已经能够做到这一点

但我希望当分辨率小于 979px 时边框缩小或在分辨率小于 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

希望这会对you.try这个

有所帮助

    <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>

注意如果您想在不使用 bootstrap 的情况下放置响应式图片，将其设置为 div background-image with width and height in % value.or

给你的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;
}

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

Fullscreen image with border that shrinks depending by device resolution

javascript

css

fullscreen