gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 10:50:35 25 4
gpt4 key购买 nike

大家好,我想制作一个主页,背景是全屏图像,四周有边框。

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

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

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

感谢您的帮助!

最佳答案

希望这对你有帮助。试试这个

    <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-imagewidthheight% 值。或

给你的div

width:anyvalue%;
height:anyvalue%;

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

 width:100%;
height:100%;

关于javascript - 边框根据设备分辨率缩小的全屏图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35021650/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com