Skalierbare <div> mit Grafik per CSS

  • Guten Tag !


    Ich habe in meinem Projekt zur Zeit ein kleines Problem, was ich nicht gelöst kriege. Es geht um den folgenden Code:



    Das CSS dazu:




    Allgemein geht es um zwei animierte DIV Links <imageBox> die per CSS mit einem Hintergrund und Animationen versehen sind. Diese befinden sich in einer anderen DIV <homepage-slider-wrap>.


    Das Ziel:


    Im Moment, wenn man die Größe der Seite verändert (Mit der Maus die Größe des Fensters), verdrängen sich die Elemente <imageBox> wenn der Platz nicht mehr ausreicht und die Formatierung der Seite wird unbrauchbar. Was erreicht werden soll, ist dass das DIV <homepage-slider-wrap> sich bei verkleinern des Fensters samt Inhalt verkleinert und dabei das Seitenverhältnis beibehalten wird.


    Hat jemand vielleicht einen Tipp wie ich das mit CSS schaffen kann ? Falls nicht, kann mir jemand mit Java weiterhelfen ?


    Vielen Dank !!!



    S.

  • Wie schon oben erwähnt. Es wäre sinnvoll nicht mit festen Größen zu arbeiten ;-)



    Du gibst jeder Div Ebene eine Width: von 100%. Wenn du 2 Nebeneinander haben möchtest,
    teilst du die 100% durch 2 also 50 % mal 50%.


    Beim Live Minimieren des Webbrowsers wirst du dann feststellen, dass die Box Ebene sich dann anpassen tut.


    Bzgl. deines Background Problems: Das hier könnte dir aber vielleicht helfen ;-)

    Code
    1. .imageBoximage4 {width:100%; min-height:992px; position:relative; text-align:center;}
    2. .imageBoximage4 { background-position:center; backgound-size:cover; float:left;}
    3. .imageBoximage4 {-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
    4. .imageBoximage4 {background: url(images/background3.jpg) no-repeat center center fixed;}



    HTML
    1. <div class="imageBoximage4"></div>


    oder alternativ:



    HTML
    1. <div><img src="bilder/background.jpg" width="100%"></div>


    Allerdings dann ohne das CSS



    Mit:

    Code
    1. /* for 1000px or less */
    2. @media screen and (max-width: 100px) {
    3. .imageBoximage4 {width:50%}
    4. }


    media screen wirst du auch Vieles erreichen können. Probier's einfach aus.