问题是如何使汽车图像居中并保持响应速度。
据我了解（这可能需要针对你的具体情况进行调整），要求是使汽车图像充满空间，但在到达页脚之前，不得在下方留有很大的空隙。
为此，在这种情况下，我将body元素设置为flex，以便一旦确定导航栏和页脚需要在空间上进行什么设置，便可以用汽车填充剩余的空间。
最初，我尝试使用汽车img的包装材料object-fit: contain并object-position: center在其中进行包装。但是，我无法完成这项工作，而是删除了汽车图像并将其设置为div的背景，并允许该div填充了屏幕上的所有剩余空间。
这是代码段。
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
height: 100vh;
}
nav {
display: flex;
justify-content: space-between;
/*padding-right: 2em;*/
padding-left: 2em;
padding-top: 2em;
padding-bottom: 1.5em;
align-items: center;
min-height: 8vh;
background-color: black;
/*font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;*/
font-family: 'Poppins', sans-serif;
}
.logo {
color: rgb(240, 235, 235);
font-size: 20px;
text-transform: uppercase;
letter-spacing: 5px;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 30%;
}
.nav-links li {
list-style: none;
}
.nav-links a {
color: white;
text-decoration: none;
letter-spacing: 1px;
font-weight: bold;
font-size: 11px;
/*padding: 5px 5px;*/
}
.burger {
display: none;
cursor: pointer;
}
.burger div {
width: 25px;
height: 3px;
background-color: white;
margin: 5px;
transition: all 0.3s ease;
}
@media screen and (max-width:1430px) {
.nav-links {
width: 40%;
}
}
@media screen and (max-width:950px) {
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: black;
display: flex;
flex-direction: column;
align-items: center;
width: 30%;
transform: translateX(100%);
padding-right: 2em;
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
padding-right: 1em;
}
.sub-menu {
position: relative;
}
}
.nav-active {
transform: translate(0%);https://ahweb.org.uk/car.png
}
.main_car_wrapper {
background-image: url(https://ahweb.org.uk/car.png);
background-repeat: no-repeat no-repeat;
background-position: center center;
background-size: contain;
width: 100%;
flex: 1 1 auto;
}
</style><nav>
<div class = "logo">
<h4>J[a]son</h4>
</div>
<ul class = "nav-links">
<li>
<a href="#">HOME</a>
</li>
<li>
<a href="#">PHOTOGRAPHY</a>
<ul class="sub-menu">
<li><a href="photography_colour.html">Colour</a></li>
<li><a href="photography_black.html">Black</a></li>
</ul>
</li>
<li>
<a href="#">CODING</a>
</li>
<li>
<a href="#">ABOUT</a>
</li>
</ul>
<div class= "burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="testing.js"></script>
<div class="main_car_wrapper">
</div>
And some more footer stuff here
<p>June, 2020. Sunshine Coast, BC, Canada </p>
非常感谢。用您的代码修复了它！