height abhängig von der Fensterbreite?

Xym

Erfahrenes Mitglied
Hallo zusammen,

habe bei mir gerade einen komischen Fehler. Ich versuche gerade folgenden Effekt nachzustellen.

Ich habe ein Bild mit einem Text drauf. Auf dem Bild liegt ein anderes Bild, das transparent ist, bis auf die Mitte. Wenn man mit der Maus über das Bild / den Text kommt, soll das transparente Bild sich soweit vergrößern, dass das andere Bild "normal" zu sehen ist. Ich hoffe man kann das verstehen.

Ich habe es so versucht:

HTML:
<div class="container">
   <div class="img">
      <div>
         <img src="img/expandable.png">
      </div>      
      <div class="img_inner">
         <h2> Titel </h2>
         <h3> Untertitel </h3>
     </div>
   </div>
</div>

CSS:
      .container {
         width: 96%;
         height: 50%;
         margin-left: 2%;
       }
  
       .container > div {
         float: left;
         display: block;
       }
  
       .container .img {
         position: relative;
         overflow: hidden;
       }
  
       .container .img div {
         width: 100% !important;
         height: 100% !important;
       }
  
       .container .img div:first-child {
         position: relative;
         margin: 0 !important;
         padding: 0 !important;
       }
  
       .container .img img {
         width: 100%;
         height: 100%;
         margin: 0 !important;
         padding: 0 !important;
         transition: all 900ms cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
       }
  
       .container .img .img_inner {
         position: absolute;
         width: 71% !important;
         height: 65% !important;
         top: 18%;
         left: 15%;
         padding: 12px;
         border: 16px solid #fff;
         color: #fff;
         transition: all 900ms cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
       }
  
       .container h2, h3  {
         text-align: center;
       }
   
 
       .container .img:hover div img  {
         width: 144% !important;
         height: 144% !important;
         margin-top: -22% !important;
         margin-left: -22% !important;
       }
  
       .container .img:hover .img_inner {
         width: 100% !important;
         height: 100% !important;
         top: 0% !important;
         left: 0% !important;
         border-width: 0px;
       }

Wollte den Effekt so erzielen, dass der DIV Container indem sich das "expandable" Bild befindet sich vergrößert.
Mit der Breite funktioniert es auch. Nur nicht mit der Höhe. Wenn die Fensterbreite kleiner wird, bleibt oben ein grau-transparenter Rand und wenn das Fenster sehr breit wird, bleibt unten ein Rand. Und ich frage mich jetzt, wieso es von der Fensterbreite abhängt, und warum es bei "width" funktioniert...
 
Zuletzt bearbeitet:
Für das gewünschte Verhalten der Elementhöhe zur Fensterbreite sind CSS3 Viewport Units geeigneter, als prozentuale Angaben.
http://www.drweb.de/magazin/neue-css-einheiten-fuer-responsive-designs-47490/ hat gesagt.:
Außerdem ist es möglich, eine Höhe auch in Relation zur Breite zu definieren – und umgekehrt natürlich ebenso.
Code:
div {
height: 50vw;
}
Im Beispiel ist die Höhe eines Elementes auf 50 Prozent der Fensterbreite gesetzt. Verkleinert man das Browserfenster in der Breite, ändert sich damit die Höhe des Elementes.
 
Zuletzt bearbeitet:
Zurück