如何使用最大寬度之外的圖像取消設置標題或容器？

Question

我注意到我的 CSS 有問題，我不知道如何取消設置最大寬度。 我想在下面的圖像中顯示圖像。 圖像應該在瀏覽器的整個寬度上傳播，而不是用其他部分（如菜單 - 菜單 2 和功能）包裹的容器。 我該怎么辦？

https://iv.pl/images/87676767254341289320.jpg

<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />

    <link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">

    <link href="css/normalize.css" rel="stylesheet" type="text/css"/>
    <link href="css/skeleton.css" rel="stylesheet" type="text/css" />
    <link href="/css/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="/css/bootstrap-grid.css" rel="stylesheet" type="text/css" />
    <link href="css/bootstrap-reboot.css" rel="stylesheet" type="text/css" />
    <link href="/stylesheets/styles.css" rel="stylesheet" type="text/css" />


    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .page {
            display: flex;
            flex-wrap: wrap;

        }

        .section {
            width: 100%;
            height: 300px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .menu {
            background-color: #5995DA;
            height: 100px;
        }

        .menu2 {
            background-color: #4CAF50;
            height: 100px;
        }

        .header {
            background-color: #30ff1c;
            justify-content: center;
            align-items: center;
            height: auto;
            display: block;

        }

        .content {
            background-color: #EAEDF0;
            height: 600px;
        }

        .sign-up {
            background-color: #D6E9FE;
        }

        .feature-1 {
            background-color: #F5CF8E;
        }

        .feature-2 {
            background-color: #F09A9D;
        }

        .feature-3 {
            background-color: #C8C6FA;
        }

        .feature-4 {
            background-color: #9c27b0;
        }

        .illustration {
            width: 100%;
            display: block;
        }

        /*.sign-up {*/
        /*    height: 200px;*/
        /*    order: 1;*/
        /*}*/
        /*.content {*/
        /*    order: 2;*/
        /*}*/

        /* Mobile Styles */
        @media only screen and (max-width: 400px) {

            body {
                background-color: #F09A9D; /* Red */
            }

        }

        /* Tablet Styles */
        @media only screen and (min-width: 401px) and (max-width: 960px) {

            body {
                background-color: #F5CF8E;
            }
            .feature-1,
            .feature-2,
            .feature-3,
            .feature-4 {
                width: 50%;
            }

        }

        /* Desktop Styles */
        @media only screen and (min-width: 961px) {

            body {
                background-color: #B2D6FF; /* Blue */
            }
            .page {
                width: 960px;
                margin: 0 auto;
            }
            .menu {
                width:25%
            }
            .menu2 {
                width: 75%;
            }

            .feature-1,
            .feature-2,
            .feature-3,
            .feature-4 {
                width: 25%;
            }

        }
    </style>
</head>
<body>
<div class='page'>

    <div class='section menu'>
        <p>MENU</p>
    </div>
    <div class="section menu2">
        <p>MENU 2</p>
    </div>

    <div class="section header">
        <img src="images/16.jpg" height="200px" width="100%"/>
    </div>

    <div class='section feature-1'>
        <p>FEATURE 1</p>
    </div>

    <div class='section feature-2'>
        <p>FEATURE 2</p>
    </div>

    <div class='section feature-3'>
        <p>FEATURE 3</p>
    </div>

    <div class="section feature-4">
        <p>FEATURE 4</p>
    </div>

    <div class='section content'>
        <p>CONTENT</p>
    </div>

    <div class='section sign-up'>
        <p>SIGN UP</p>
    </div>

</div>
</body>
</html>

Answer 1

如果我理解正確，它可以幫助您：

 main { width: 100%; background: yellow; } .container{ width: 50%; margin:auto; } section { width: 100%; height: 100px } .section1 {background: red} .section2 {background: blue} .section3 {background: green} .section2 { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }

 <main> <div class="container"> <section class="section1"></section> <section class="section2"></section> <section class="section3"></section> </div> </main>

如何使用最大寬度之外的圖像取消設置標題或容器？

問題描述

1 個解決方案

解決方案1
0 2019-07-19 06:48:36

如何使用最大寬度之外的圖像取消設置標題或容器？

問題描述

1 個解決方案

解決方案1 0 2019-07-19 06:48:36

解決方案1
0 2019-07-19 06:48:36