Obrazek na całą szerokość przeglądarki

0

Witam,

możliwe, że coś nagrzebałem przy projektowaniu bloków i stylowaniu w kontekście projektu strony responsywnej Mobile-First. Zależy mi na tym, aby obrazek widoczny poniżej rozciągnąć na całą szerokość przeglądarki tj. żeby obrazek nie był zamknięty w bloku określonym przez max-width jak dla innych bloków tj. main i main 2 stanowią 100% max-width. Chcę teraz wyjść po za ten max-width tylko dla tego zdjęcia. Jak to zrobić? Link do zdjęcia: 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;

        }

        .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;
        }

        .photo img {
            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>

<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>

obrazek z przykładem dostępny pod linkiem poniżej.

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

1

Rzuć okiem na https://stackoverflow.com/questions/5581034/is-there-are-way-to-make-a-child-divs-width-wider-than-the-parent-div-using-css, ale to takie trochę obejście tematu. Co do zasady HTML/CSS zakłada, że elementy-dzieci powinny się mieścić w obrysie (patrz - model pudełkowy http://www.kurshtml.edu.pl/css/model_pudelkowy,marginesy.html) swojego rodzica.

Rozwiązanie podane w powyższym linku:

.child-element {
    position: relative;
    width: 100vw;
    left: calc(-50vw + 50%);
    height: 50px;

jest raczej obejściem problemu. Zastanów się, w jaki sposób zrobić to porządnie, czyli żeby element nadrzędny był na całą szerokość okna, następnie w nim umieść menu i menu2 o pożądanej przez Ciebie szerokości, następnie obrazek na 100% szerokości i pod nim pojemnik na feature o takiej szerokości, co element z menu powyżej.

1

W .page masz ogranicznik ustawiony na max-width: 960px na desktopach, jeżeli chcesz zeby obrazek był na całą szerokość musi się element nie znajdować w rodzicu .page

1

Ja na Twoim miejscu podzieliłabym stronę inaczej. Dodałabym div MenuSpace1 i MenuSpace2. Były by on tam gdzie masz Menu i Menu2. MenuSpace1 i MenuSpace2 ten sam kolor co chcesz background. Niżej div z obrazkiem. Na dole dodałabym divy FeatureSpace1 i FeatureSpace2. Zobacz na plik. Zakoduje to i wrzucę potem kod.

2
RetupK napisał(a):

W .page masz ogranicznik ustawiony na max-width: 960px na desktopach, jeżeli chcesz zeby obrazek był na całą szerokość musi się element nie znajdować w rodzicu .page

No co za herezje panowie?

Działający przykład (wnusia ma ustawione po 2px z lewej i prawej, żeby było widać, że nic się nie przesuwa przy zmianie rozmiaru okna):

<!DOCTYPE html>
<html>
<head>
  <title>DIV na cały ekran</title>
<style>
HTML, BODY {
  margin:0px;
  padding:0px;
}

#babcia {
  width:100%;
  max-width:800px;
  margin:auto;
  margin-top:50px;
  background-color:#BEFFBE;
}

#mama {
  margin:20px;
  width:calc(100% - 40px);
  background-color:#FFC2C2;
}

#wnusia {
  margin-bottom:20px;
  width:calc(100vw - 4px);
  margin-left:calc(50% - 50vw + 2px);
  background-color:#C0C0FF;
}
</style>
</head>
<body>

<div id="babcia">BABCIA
  <div id="mama">MAMA
    <div id="wnusia">WNUSIA (po calosci)
    </div>
  </div>
</div>
  
</body>
</html>

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.

Utwórz konto