时间戳

首页 > 解决方案 > 在响应式网站中垂直居中图像时遇到问题 [在 PC 和移动设备中]

html - 在响应式网站中垂直居中图像时遇到问题 [在 PC 和移动设备中]

问题描述

这是我在我的网站上看到的：

网站

由于图像位于导航栏下方，我希望它在我的响应式网站中垂直居中，类似于此网站：https://www.ownhour.co.kr/#;

我在内部图像样式表中添加了 100% 的宽度和高度，并在外部 CSS 中添加了边距和块。用移动版检查后，图像似乎位于顶部，底部有一个巨大的间隙。

这是我在我的网站上看到的：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="monday.css">
    <title>J[a]son</title>
</head>
<body>
    <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>
    <img class="main_car" src="Photos/main_car.jpg" alt="car" width="100%" height="100%"/>
           <!--<p>June, 2020. Sunshine Coast, BC, Canada </p>-->
</body>
</html>

CSS

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

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%);
}

标签： htmlcssalignmentcenter

解决方案

问题是如何使汽车图像居中并保持响应。

据我了解（这可能需要针对您的特定情况进行调整），要求汽车图像填充空间，但在到达页脚之前不要在下面留下巨大的间隙。

为了在这种情况下做到这一点，我将 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>

推荐阅读