全屏响应式背景图像
发布于 2021-02-02 16:49:55
我对前端开发和基础非常陌生。
我正在尝试<div class="main-header">
成为响应时按比例缩小的全屏图像。
谁能告诉我我在做什么错?它可以正确缩放,但无法显示完整图像。我还希望将<div class="large-6 large-offset-6
columns">
其放在移动设备上,这可能吗?
HTML:
<!-- MAIN HEADER -->
<div class="main-header">
<div class="row">
<div class="large-6 large-offset-6 columns">
<h1 class="logo">BleepBleeps</h1>
<h3>A family of little friends<br>that make parenting easier</h3>
</div> <!-- END large-6 large-offset-6 columns -->
</div><!-- END ROW -->
</div><!-- END MAIN-HEADER -->
CSS:
.main-header {
background-image: url(../img/bb-background2.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 100%;
height: 100%;
}
h1.logo {
text-indent: -9999px;
height:115px;
margin-top: 10%;
}
关注者
0
被浏览
122
1 个回答
-
//HTML
//CSS #bg { position: fixed; top: 0; left: 0; /* Preserve aspet ratio */ min-width: 100%; min-height: 100%; }
要么
img.bg { /* Set rules to fill background */ min-height: 100%; min-width: 1024px; /* Set up proportionate scaling */ width: 100%; height: auto; /* Set up positioning */ position: fixed; top: 0; left: 0; } @media screen and (max-width: 1024px) { /* Specific to this particular image */ img.bg { left: 50%; margin-left: -512px; /* 50% */ } }
要么
//HTML <img src="images/bg.jpg" id="bg" alt=""> //CSS #bg { position: fixed; top: 0; left: 0; } .bgwidth { width: 100%; } .bgheight { height: 100%; } //jQuery $(window).load(function() { var theWindow = $(window), $bg = $("#bg"), aspectRatio = $bg.width() / $bg.height(); function resizeBg() { if ( (theWindow.width() / theWindow.height()) < aspectRatio ) { $bg .removeClass() .addClass('bgheight'); } else { $bg .removeClass() .addClass('bgwidth'); } } theWindow.resize(resizeBg).trigger("resize"); });