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

Fullscreen image with border that shrinks depending by device resolution

本文关键字：分辨率 缩小 图像 边框      更新时间：2023-09-26

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

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

https://jsfiddle.net/dforce/3j5uo5qo/1/

但我希望当分辨率较小或分辨率小于 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>

感谢您的帮助！

希望这对您有所帮助。试试这个

    <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 background-image，并在%值中width和height。

给你的div 

width:anyvalue%;
height:anyvalue%;

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

 width:100%;
 height:100%;

响应式 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;
}
相关文章：