Skalierbare <div> mit Grafik per CSS

DanielS

Guten Tag !

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

HTML

<div id="homepage-slider-wrap" class="clr flexslider-container">


    <div class="imageBox">        
<div class="imageBoximage4"></div>     
 <div class="figure tr-slideIn">        
<div class="text">        
<div class="textinner">        Lorem ipsum dolor sit amet, consetetur sadipscing elitr        
</div>        
</div>        
</div>    
</div>        


<div class="imageBox">        
<div class="imageBoximage5"></div>        
<div class="figure tr-slideIn">        
<div class="text">        
<div class="textinner">        Lorem ipsum dolor sit amet, consetetur sadipscing elitr        
</div>        
</div>        
</div>    
</div>       
</div>

Alles anzeigen

Das CSS dazu:

Code

.imageBoximage4 {
position: relative;

        width: 1280px;
        height: 557px;
        margin: 0;

        -webkit-animation: animation linear 20s; /* Chrome, Safari, Opera */
        animation: animation linear 20s;
        background-image: url(http://wallalay.com/wp-content/uploads/2014/08/Backgrounds-44.jpg);
    }

.imageBoximage5 {
        position: relative;
        width: 1280px;
        height: 557px;
        margin: 0;
        -webkit-animation: animation linear 20s; /* Chrome, Safari, Opera */
        animation: animation linear 20s;
        background-image: url(http://www.realrock993.com/wp-content/uploads/2014/03/3d-black-cubes-backgrounds-wallpapers1.jpg);
    }

    /* Chrome, Safari, Opera */
@-webkit-keyframes animation {
    from {right:0px;}
    to {right:250px;}
}




/* Standard syntax */
@keyframes animation {
    from {right: 0px;}
    to {right: 250px;}
}





.text {
float:left;
width: 313px;
height: 557px;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
} 




.textinner {
transform:translateX(-75px);
} 




.imageBox {
        position: relative;
        overflow: hidden;
        width: 313px;
        height: 557px;
        float: left;
        float:left;




-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);

    }

.figure {
        position: absolute;
        bottom: 0; left: 0;
        padding: 5px;
        margin:5px;
        background: white;
    }

 .imageBox .tr-slideIn {
        left: -330px;
        width: 313px;
        height: 557px;
        margin: 0;
        padding-top: 85px;
        opacity: 0.7;   
        background:grey;
        color: white;
        -webkit-transition: all 0.5s;
    }

.imageBox:hover .tr-slideIn {
        left: 0;
    }

Alles anzeigen

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.

nadjak

Für ein Responsive Layout darfst du keine festen Pixelgrößen verwenden.
Nimm stattdessen Prozent oder bei Schriften em.

VG Nadja

Helpstar24

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

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

HTML

<div class="imageBoximage4"></div>

oder alternativ:

HTML

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

Allerdings dann ohne das CSS

Mit:

Code

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


}

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

Tags