如何设置 window 大小更改时更改的 position
[英]How to set a position that changes when the window size changes
问题描述
我正在为我的祖父创建一个 web 页面，我将让这个骑自行车的家伙穿过屏幕，当悬停在屏幕上时，停下来说“戴头盔”。 我让他来回移动，它固定在导航栏上，但问题是当屏幕尺寸发生变化时，比如说它在较小的手机或电脑上，然后骑自行车的家伙在不同的位置转身并跑到前面导航栏的东西。
这是 html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>CountrySideBycicling</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/5.1.1/bootstrap-social.min.css">
<script src="https://kit.fontawesome.com/8333c8288f.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- lil dude -->
<h6 id="message"></h6>
<img src="../lil dude/riding.gif" alt="riding" id="riding">
<script>
let message = document.getElementById('message');
let speed = 5;
let lastspeed = 0;
let counter = 0;
let x = 50;
let y = 25;
let mX = 0;
let mY = 0;
//flipping and animating
function move() {
x += speed;
document.getElementById('riding').style.left=(x + "px");
if (x + document.getElementById('riding').style.width >= window.innerWidth - 550) {
speed = -5;
document.getElementById('riding').style.transform="rotateY(150deg)";
}
if (x <= 200) {
speed = 5;
document.getElementById('riding').style.transform="rotateY(0deg)";
}
if (speed == 0) {
document.getElementById('riding').src="../lil dude/stop.gif";
message.style.top = (y - 40 + "px");
message.style.left = (x + 50 + "px");
message.innerHTML = "Wear a Helmet!";
setTimeout(reset, 2000);console.log('hi');
}
else requestAnimationFrame(move);
}
//mouse move collision detection
window.addEventListener('mousemove', function(e) {
mX = e.clientX;
mY = e.clientY;
if (mX >= x && mX <= x + 50 && mY >= y && mY <= y + 40) {
lastspeed = speed || lastspeed;
if (counter == 0) {
slow();
counter = 1;
}
}
console.log(mX + " " + mY)
});
//braking it
function slow() {
document.getElementById('riding').src="../lil dude/brake.gif";
do {
if (speed > 0){
speed -= 0.1;
} else if(speed < 0) {
speed += 0.1;
}
}
while (Math.abs(speed)>0.01);
speed=0;
}
//reset
function reset() {
document.getElementById('riding').src="../lil dude/riding.gif";
message.innerHTML = "";
do {
if (lastspeed > 0) {
speed += 0.1;
} else if (lastspeed < 0) {
speed -= 0.1;
}console.log(lastspeed,speed);
}
while(5-Math.abs(speed) > 0.01);
move();
counter = 0;
}
move();
</script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
<div class="container">
<a class="navbar-brand" href="#">
<!-- logo -->
<img class = "navbar-brand" src="https://w7.pngwing.com/pngs/764/321/png-transparent-bicycle-shop-cycling-logo-fixed-gear-bicycle-cyclist-top-sport-bicycle-logo.png" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="gallery.html">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="services.html">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contacts.html">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="brands.html.html">Brands</a>
</li>
</ul>
</div>
</div>
</nav>
<div style="height: 50;"></div>
<div class="jumbotron text-center">
<div class="container">
<div style="height: 25px;"></div>
<h1>CountrySideBycicling</h1>
<div style="height: 25px;"></div>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quisquam officiis aperiam temporibus exercitationem hic provident nesciunt,
quod officia neque quam sint dicta, mollitia commodi illo necessitatibus inventore blanditiis eveniet maiores.
</p>
<div style="height: 25px;"></div>
<button class="btn btn-primary">Read More</button>
</div>
</div>
<!-- Page Content -->
<div class="container">
<!-- Heading Row -->
<div class="row align-items-center my-5">
<div class="col-lg-7">
<img class="img-fluid rounded mb-4 mb-lg-0" src="http://placehold.it/900x400" alt="">
</div>
<!-- /.col-lg-8 -->
<div class="col-lg-5">
<h1 class="font-weight-light">Business Name or Tagline</h1>
<p>This is a template that is great for small businesses. It doesn't have too much fancy flare to it, but it makes a great use of the standard Bootstrap core components. Feel free to use this template for any project you want!</p>
<a class="btn btn-primary" href="#">Call to Action!</a>
</div>
<!-- /.col-md-4 -->
</div>
<!-- /.row -->
<!-- Call to Action Well -->
<div class="card text-white bg-secondary my-5 py-4 text-center">
<div class="card-body">
<p class="text-white m-0">This call to action card is a great place to showcase some important information or display a clever tagline!</p>
</div>
</div>
<!-- /.col-md-4 -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<!-- Content section -->
<section class="py-5">
<div class="container">
<h1>Section Heading</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, suscipit, rerum quos facilis repellat architecto commodi officia atque nemo facere eum non illo voluptatem quae delectus odit vel itaque amet.</p>
</div>
</section>
<!-- Image Section - set the background image for the header in the line below -->
<section class="py-5 bg-image-full" style="background-image: url('https://unsplash.it/1900/1080?image=1081');">
<!-- Put anything you want here! There is just a spacer below for demo purposes! -->
<div style="height: 200px;"></div>
</section>
<!-- Content section -->
<section class="py-5">
<div class="container">
<h1>Section Heading</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, suscipit, rerum quos facilis repellat architecto commodi officia atque nemo facere eum non illo voluptatem quae delectus odit vel itaque amet.</p>
</div>
</section>
<!-- slider -->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active"></div>
<div id="target" class="carousel-item"></div>
<div class="carousel-item"></div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div style="height: 50px;"></div>
</div>
</div>
<div class="container">
<!-- Content Row -->
<div class="row">
<div class="col-md-4 mb-5">
<div class="card h-100">
<div class="card-body">
<h2 class="card-title">Card One</h2>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem magni quas ex numquam, maxime minus quam molestias corporis quod, ea minima accusamus.</p>
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary btn-sm">More Info</a>
</div>
</div>
</div>
<!-- /.col-md-4 -->
<div class="col-md-4 mb-5">
<div class="card h-100">
<div class="card-body">
<h2 class="card-title">Card Two</h2>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod tenetur ex natus at dolorem enim! Nesciunt pariatur voluptatem sunt quam eaque, vel, non in id dolore voluptates quos eligendi labore.</p>
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary btn-sm">More Info</a>
</div>
</div>
</div>
<!-- /.col-md-4 -->
<div class="col-md-4 mb-5">
<div class="card h-100">
<div class="card-body">
<h2 class="card-title">Card Three</h2>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem magni quas ex numquam, maxime minus quam molestias corporis quod, ea minima accusamus.</p>
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary btn-sm">More Info</a>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="page-footer font-small mdb-color pt-4">
<!-- Footer Links -->
<div class="container text-center text-md-left">
<!-- Footer links -->
<div class="row text-center text-md-left mt-3 pb-3">
<!-- Grid column -->
<div class="col-md-3 col-lg-3 col-xl-3 mx-auto mt-3">
<h6 class="text-uppercase mb-4 font-weight-bold">CountrySideBycicling</h6>
<p>Here you can use rows and columns to organize your footer content. Lorem ipsum dolor sit amet,
consectetur
adipisicing elit.</p>
</div>
<!-- Grid column -->
<hr class="w-100 clearfix d-md-none">
<!-- Grid column -->
<div class="col-md-2 col-lg-2 col-xl-2 mx-auto mt-3">
<h6 class="text-uppercase mb-4 font-weight-bold">Brand Sites</h6>
<p>
<a href="#!">Bikesite</a>
</p>
<p>
<a href="#!">Bikesite</a>
</p>
<p>
<a href="#!">Bikesite</a>
</p>
</div>
<!-- Grid column -->
<hr class="w-100 clearfix d-md-none">
<!-- Grid column -->
<div class="col-md-3 col-lg-2 col-xl-2 mx-auto mt-3">
<h6 class="text-uppercase mb-4 font-weight-bold">Useful links</h6>
<p>
<a href="gallery.html">Gallary</a>
</p>
<p>
<a href="brands.html">Brands</a>
</p>
<p>
<a href="about.html">About</a>
</p>
</div>
<!-- Grid column -->
<hr class="w-100 clearfix d-md-none">
<!-- Grid column -->
<div class="col-md-4 col-lg-3 col-xl-3 mx-auto mt-3">
<h6 class="text-uppercase mb-4 font-weight-bold">Contact</h6>
<p>
<i class="fas fa-home mr-3"></i> windsor, oh, cox road</p>
<p>
<i class="fas fa-envelope mr-3"></i> grandpa@gmail.com</p>
<p>
<i class="fas fa-phone mr-3"></i> + 01 234 567 88</p>
</div>
<!-- Grid column -->
</div>
<!-- Footer links -->
<hr>
<!-- Grid row -->
<div class="row d-flex align-items-center">
<!-- Grid column -->
<div class="col-md-7 col-lg-8">
<!--Copyright-->
<p class="text-center text-md-left">© 2020 Copyright:
<a href="http://www.countrysidebicycling.com/">
<strong>countrysidebicycling.com</strong>
</a>
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-5 col-lg-4 ml-lg-0">
<!-- Social buttons -->
<div class="text-center text-md-right">
<ul class="list-unstyled list-inline">
<li class="list-inline-item">
<a class="btn btn-social-icon btn-vk">
<span class="fa fa-facebook"></span>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-social-icon btn-vk">
<span class="fa fa-instagram"></span>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-social-icon btn-vk">
<span class="fa fa-twitter"></span>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-social-icon btn-vk">
<span class="fa fa-pinterest"></span>
</a>
</li>
</ul>
</div>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
</footer>
<script src="jquery.slim.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
这是 css
margin: 0;
padding: 0;
}
div{
width: 100%;
height: 100%;
}
.navbar-default {
background: none;
}
.navbar{
position: fixed;
z-index: 10;
padding: 10px 0 10px 10px;
top: 0;
width: 100%;
}
footer{
background-color:#e6e6e6;
}
.jumbotron{
background-image: url('download.jpeg');
color: white;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
min-height: 400px;
margin-top: 0px;
margin-bottom: 8px;
}
a{
color:#2e5984;
}
.navbar-brand{
height: 60px;
width: 100px;
}
#aboutusimg{
background-size: 100%;
background-image: url(download.jpeg);
background-repeat:no-repeat;
height: 400px;
}
/* slider */
.carousel .carousel-item {
width: 100%;
height: 100vh;
background-size: cover;
background-position: center;
}
.carousel .carousel-item:first-of-type {
background-image: url('download.jpeg');
}
.carousel .carousel-item:nth-of-type(2) {
background-image: url("download.jpeg");
}
.carousel .carousel-item:last-of-type {
background-image: url("download.jpeg");
}
.carousel-control-prev-icon, .carousel-control-next-icon {
width: 50px;
height: 50px;
}
/* partners slider, about page */
/* carousel */
h2{
text-align:center;
padding: 20px;
}
/* Slider */
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 100%;
}
.slick-slider
{
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list
{
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus
{
outline: none;
}
.slick-list.dragging
{
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list
{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track
{
position: relative;
top: 0;
left: 0;
display: block;
}
.slick-track:before,
.slick-track:after
{
display: table;
content: '';
}
.slick-track:after
{
clear: both;
}
.slick-loading .slick-track
{
visibility: hidden;
}
.slick-slide
{
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide
{
float: right;
}
.slick-slide img
{
display: block;
}
.slick-slide.slick-loading img
{
display: none;
}
.slick-slide.dragging img
{
pointer-events: none;
}
.slick-initialized .slick-slide
{
display: block;
}
.slick-loading .slick-slide
{
visibility: hidden;
}
.slick-vertical .slick-slide
{
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
/* lil dude */
#riding{
width: 50px;
height: 40px;
z-index: 30;
position: fixed;
top: 25px;
left: 0px;
transform: rotateY(0deg);
}
#message{
color: white;
position: fixed;
top: 0;
left: 0;
}
keep in mind that there are other files, this is just the index.html, so the css has other stuff in it, but the little dude is at the bottom of the css, and before the navbar in the html.
1 个解决方案
解决方案1
1 已采纳 2020-05-05 21:37:12
当为不同尺寸的屏幕调整导航栏尺寸时，硬编码值 200 和 550 将不起作用。 我已将其更改为检索（.navbar-toggle 按钮或.nav-item [0]）和.navbar-brand 图像的 offsetWidth 和 offsetLeft 以反弹。
body { margin: 0; padding: 0; } div{ width: 100%; height: 100%; }.navbar-default { background: none; }.navbar{ position: fixed; z-index: 10; padding: 10px 0 10px 10px; top: 0; width: 100%; } footer{ background-color:#e6e6e6; }.jumbotron{ background-image: url('download.jpeg'); color: white; background-attachment: fixed; background-repeat: no-repeat; background-size: cover; min-height: 400px; margin-top: 0px; margin-bottom: 8px; } a{ color:#2e5984; }.navbar-brand{ height: 60px; width: 100px; } #aboutusimg{ background-size: 100%; background-image: url(download.jpeg); background-repeat:no-repeat; height: 400px; } /* slider */.carousel.carousel-item { width: 100%; height: 100vh; background-size: cover; background-position: center; }.carousel.carousel-item:first-of-type { background-image: url('download.jpeg'); }.carousel.carousel-item:nth-of-type(2) { background-image: url("download.jpeg"); }.carousel.carousel-item:last-of-type { background-image: url("download.jpeg"); }.carousel-control-prev-icon, .carousel-control-next-icon { width: 50px; height: 50px; } /* partners slider, about page */ /* carousel */ h2{ text-align:center; padding: 20px; } /* Slider */.slick-slide { margin: 0px 20px; }.slick-slide img { width: 100%; }.slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }.slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; }.slick-list:focus { outline: none; }.slick-list.dragging { cursor: pointer; cursor: hand; }.slick-slider.slick-track, .slick-slider.slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }.slick-track { position: relative; top: 0; left: 0; display: block; }.slick-track:before, .slick-track:after { display: table; content: ''; }.slick-track:after { clear: both; }.slick-loading.slick-track { visibility: hidden; }.slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'].slick-slide { float: right; }.slick-slide img { display: block; }.slick-slide.slick-loading img { display: none; }.slick-slide.dragging img { pointer-events: none; }.slick-initialized.slick-slide { display: block; }.slick-loading.slick-slide { visibility: hidden; }.slick-vertical.slick-slide { display: block; height: auto; border: 1px solid transparent; }.slick-arrow.slick-hidden { display: none; } /* lil dude */ #riding{ width: 50px; height: 40px; z-index: 30; position: fixed; top: 25px; left: 0px; transform: rotateY(0deg); } #message{ color: white; position: fixed; top: 0; left: 0; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1: shrink-to-fit=no"> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <title>CountrySideBycicling</title> <link rel="stylesheet" href="main:css"> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/bootstrap-social/5.1.1/bootstrap-social.min:css"> <script src="https.//kit.fontawesome.com/8333c8288f.js" crossorigin="anonymous"></script> </head> <body> <.-- lil dude --> <h6 id="message"></h6> <img src="../lil dude/riding;gif" alt="riding" id="riding"> <script> let message = document;getElementById('message'); let speed = 5; let lastspeed = 0; let counter = 0; let x = 50; let y = 25; let mX = 0; let mY = 0. //flipping and animating function move() { x += speed. document.getElementById('riding');style.left=(x + "px"); var v=document.getElementsByClassName('navbar-toggler')[0]. if(v&&v;offsetLeft===0) v=document.getElementsByClassName('nav-item')[0]; var w=document.getElementsByClassName('navbar-brand')[0]. if (speed > 0 && x + document.getElementById('riding').style.width >= (v&&(v;offsetLeft-v.offsetWidth))) { speed = -5. document.getElementById('riding');style.transform="rotateY(150deg)". } if (speed < 0 && x <= (;w||(w.offsetLeft+w.offsetWidth))) { speed = 5. document;getElementById('riding').style.transform="rotateY(0deg)". } if (speed == 0) { document.getElementById('riding').src=";./lil dude/stop.gif"; message.style.top = (y - 40 + "px"); message.style;left = (x + 50 + "px"), message;innerHTML = "Wear a Helmet."; setTimeout(reset; 2000).console,log('hi'). } else requestAnimationFrame(move); } //mouse move collision detection window.addEventListener('mousemove'; function(e) { mX = e;clientX; mY = e;clientY. if (mX >= x && mX <= x + 50 && mY >= y && mY <= y + 40) { lastspeed = speed || lastspeed; if (counter == 0) { slow(). counter = 1. } } console.log(mX + " " + mY) }). //braking it function slow() { document.getElementById('riding');src=".;/lil dude/brake.gif"; do { if (speed > 0){ speed -= 0.1. } else if(speed < 0) { speed += 0;1; } } while (Math.abs(speed)>0.01). speed=0. } //reset function reset() { document.getElementById('riding');src=".;/lil dude/riding.gif"; message.innerHTML = ""; do { if (lastspeed > 0) { speed += 0.1, } else if (lastspeed < 0) { speed -= 0;1. }console.log(lastspeed;speed); } while(5-Math;abs(speed) > 0;01): move(). counter = 0. } move(). </script> <nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top"> <div class="container"> <a class="navbar-brand" href="#"> <.-- logo --> <img class = "navbar-brand" src="https.//w7.pngwing.com/pngs/764/321/png-transparent-bicycle-shop-cycling-logo-fixed-gear-bicycle-cyclist-top-sport-bicycle-logo.png" alt=""> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarResponsive"> <ul class="navbar-nav ml-auto"> <li class="nav-item active"> <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="about.html">About</a> </li> <li class="nav-item"> <a class="nav-link" href="gallery:html">Gallery</a> </li> <li class="nav-item"> <a class="nav-link" href="services;html">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="contacts:html">Contact</a> </li> <li class="nav-item"> <a class="nav-link" href="brands;html:html">Brands</a> </li> </ul> </div> </div> </nav> <div style="height; 50."></div> <div class="jumbotron text-center"> <div class="container"> <div style="height, 25px,"></div> <h1>CountrySideBycicling</h1> <div style="height. 25px:"></div> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit; Quisquam officiis aperiam temporibus exercitationem hic provident nesciunt: quod officia neque quam sint dicta. mollitia commodi illo necessitatibus inventore blanditiis eveniet maiores. </p> <div style="height. 25px,"></div> <button class="btn btn-primary">Read More</button> </div> </div> <.-- Page Content --> <div class="container"> <.-- Heading Row --> <div class="row align-items-center my-5"> <div class="col-lg-7"> <img class="img-fluid rounded mb-4 mb-lg-0" src="http.//placehold.it/900x400" alt=""> </div> <.-- /.col-lg-8 --> <div class="col-lg-5"> <h1 class="font-weight-light">Business Name or Tagline</h1> <p>This is a template that is great for small businesses, It doesn't have too much fancy flare to it. but it makes a great use of the standard Bootstrap core components, Feel free to use this template for any project you want.</p> <a class="btn btn-primary" href="#">Call to Action,</a> </div> <,-- /.col-md-4 --> </div> <:-- /:row --> <.-- Call to Action Well --> <div class="card text-white bg-secondary my-5 py-4 text-center"> <div class="card-body"> <p class="text-white m-0">This call to action card is a great place to showcase some important information or display a clever tagline?</p> </div> </div> <;-- /:col-md-4 --> </div> <;-- /,row --> </div> <.-- /,container --> <.-- Content section --> <section class="py-5"> <div class="container"> <h1>Section Heading</h1> <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</p> <p>Lorem ipsum dolor sit amet. consectetur adipisicing elit: Aliquid; suscipit, rerum quos facilis repellat architecto commodi officia atque nemo facere eum non illo voluptatem quae delectus odit vel itaque amet.</p> </div> </section> <,-- Image Section - set the background image for the header in the line below --> <section class="py-5 bg-image-full" style="background-image, url('https.//unsplash.it/1900/1080,image=1081')."> <,-- Put anything you want here, There is just a spacer below for demo purposes. --> <div style="height. 200px,"></div> </section> <.-- Content section --> <section class="py-5"> <div class="container"> <h1>Section Heading</h1> <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</p> <p>Lorem ipsum dolor sit amet. consectetur adipisicing elit. Aliquid, suscipit. rerum quos facilis repellat architecto commodi officia atque nemo facere eum non illo voluptatem quae delectus odit vel itaque amet.</p> </div> </section> <.-- slider --> <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"></div> <div id="target" class="carousel-item"></div> <div class="carousel-item"></div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <div style="height. 50px,"></div> </div> </div> <div class="container"> <,-- Content Row --> <div class="row"> <div class="col-md-4 mb-5"> <div class="card h-100"> <div class="card-body"> <h2 class="card-title">Card One</h2> <p class="card-text">Lorem ipsum dolor sit amet. consectetur adipisicing elit: Rem magni quas ex numquam: maxime minus quam molestias corporis quod. ea minima accusamus.</p> </div> <div class="card-footer"> <a href="#" class="btn btn-primary btn-sm">More Info</a> </div> </div> </div> <.-- /.col-md-4 --> <div class="col-md-4 mb-5"> <div class="card h-100"> <div class="card-body"> <h2 class="card-title">Card Two</h2> <p class="card-text">Lorem ipsum dolor sit amet. consectetur adipisicing elit. Quod tenetur ex natus at dolorem enim: Nesciunt pariatur voluptatem sunt quam eaque. vel. non in id dolore voluptates quos eligendi labore.</p> </div> <div class="card-footer"> <a href="#" class="btn btn-primary btn-sm">More Info</a> </div> </div> </div> <.-- /.col-md-4 --> <div class="col-md-4 mb-5"> <div class="card h-100"> <div class="card-body"> <h2 class="card-title">Card Three</h2> <p class="card-text">Lorem ipsum dolor sit amet. consectetur adipisicing elit. Rem magni quas ex numquam: maxime minus quam molestias corporis quod. ea minima accusamus.</p> </div> <div class="card-footer"> <a href="#" class="btn btn-primary btn-sm">More Info</a> </div> </div> </div> </div> </div> <.-- Footer --> <footer class="page-footer font-small mdb-color pt-4"> <.-- Footer Links --> <div class="container text-center text-md-left"> <.-- Footer links --> <div class="row text-center text-md-left mt-3 pb-3"> <.-- Grid column --> <div class="col-md-3 col-lg-3 col-xl-3 mx-auto mt-3"> <h6 class="text-uppercase mb-4 font-weight-bold">CountrySideBycicling</h6> <p>Here you can use rows and columns to organize your footer content: Lorem ipsum dolor sit amet. consectetur adipisicing elit.</p> </div> <.-- Grid column --> <hr class="w-100 clearfix d-md-none"> <.-- Grid column --> <div class="col-md-2 col-lg-2 col-xl-2 mx-auto mt-3"> <h6 class="text-uppercase mb-4 font-weight-bold">Brand Sites</h6> <p> <a href="#.">Bikesite</a> </p> <p> <a href="#.">Bikesite</a> </p> <p> <a href="#!">Bikesite</a> </p> </div> <!-- Grid column --> <hr class="w-100 clearfix d-md-none"> <!-- Grid column --> <div class="col-md-3 col-lg-2 col-xl-2 mx-auto mt-3"> <h6 class="text-uppercase mb-4 font-weight-bold">Useful links</h6> <p> <a href="gallery.html">Gallary</a> </p> <p> <a href="brands.html">Brands</a> </p> <p> <a href="about.html">About</a> </p> </div> <!-- Grid column --> <hr class="w-100 clearfix d-md-none"> <!-- Grid column --> <div class="col-md-4 col-lg-3 col-xl-3 mx-auto mt-3"> <h6 class="text-uppercase mb-4 font-weight-bold">Contact</h6> <p> <i class="fas fa-home mr-3"></i> windsor, oh, cox road</p> <p> <i class="fas fa-envelope mr-3"></i> grandpa@gmail.com</p> <p> <i class="fas fa-phone mr-3"></i> + 01 234 567 88</p> </div> <!-- Grid column --> </div> <!-- Footer links --> <hr> <!-- Grid row --> <div class="row d-flex align-items-center"> <!-- Grid column --> <div class="col-md-7 col-lg-8"> <!--Copyright--> <p class="text-center text-md-left">© 2020 Copyright: <a href="http://www.countrysidebicycling.com/"> <strong>countrysidebicycling.com</strong> </a> </p> </div> <!-- Grid column --> <!-- Grid column --> <div class="col-md-5 col-lg-4 ml-lg-0"> <!-- Social buttons --> <div class="text-center text-md-right"> <ul class="list-unstyled list-inline"> <li class="list-inline-item"> <a class="btn btn-social-icon btn-vk"> <span class="fa fa-facebook"></span> </a> </li> <li class="list-inline-item"> <a class="btn btn-social-icon btn-vk"> <span class="fa fa-instagram"></span> </a> </li> <li class="list-inline-item"> <a class="btn btn-social-icon btn-vk"> <span class="fa fa-twitter"></span> </a> </li> <li class="list-inline-item"> <a class="btn btn-social-icon btn-vk"> <span class="fa fa-pinterest"></span> </a> </li> </ul> </div> </div> <!-- Grid column --> </div> <!-- Grid row --> </div> <!-- Footer Links --> </footer> <script src="jquery.slim.min.js"></script> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> </body> </html> here is the css
将元素放置在图像元素上方，但是图像会随着窗口的大小而变化
[英]Position element over image element but the image changes size with the window
窗口大小更改时，是否可以自动更改组元素的大小？
[英]Is it possible to auto change the size of group elements when the window size changes?
如何调整 IMG 元素的大小，使其在窗口大小更改时按比例位于窗口上的同一位置？
[英]How do I resize an IMG element so that it is proportionately in the same place on the window when the window size changes?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.