CSS Overlaying Bilder auf einer bestimmten Bildschirmgröße

Question

Also möchte ich einige Bilder übereinander legen, aber nur beim Betrachten der Website auf einem iPad/iPhone.

Ich habe den folgenden Code geschrieben, der so funktioniert, wie es sollte. Wenn die Funktion @media hinzugefügt wird, passiert jedoch nichts.

HTML:

<section class="logos"> 
    <div class="container"> 
     <div class="img1"><img src="./images/testing1.png" alt=""> 
     </div> 
     <div class="img2"><img src="./images/testing2.png" alt=""> 
     </div> 
     <div class="img3"><img src="./images/testing3.png" alt=""> 
     </div> 
     <div class="img4"><img src="./images/testing4.png" alt=""> 
     </div> 
     <div class="img5"><img src="./images/testing5.png" alt=""> 
     </div> 
    </div> 
</section> 

CSS:

@media only screen and (min-width: 0px) and (max-width: 768px) { 
.container{ 
    position:relative; 
    left:0; 
    top:0; } 

.img1{ 
    position:absolute; 
    top:0; 
    left:0; } 

.img2{ 
    position:absolute; 
    top:0; 
    left:0; } 

.img3{ 
    position:absolute; 
    top:0; 
    left:0; } 

.img4{ 
    position:absolute; 
    top:0; 
    left:0; } 

.img5{ 
    position:absolute; 
    top:0; 
    left:0; } 
} 

Answer 1

Sie benötigen eine Breite und eine Höhe zu Ihrem Container hinzufügen, wenn Sie dafür arbeiten möchten, da es zur Zeit nichts so ist das Bild absolut aber zu dem, wie der Container keine Höhe hat. so meine sugesstion ist die aktuelle Höhe, um herauszufinden, die für Ihre Bilder in Ordnung ist, zB

 
@media only screen and (min-width: 0px) and (max-width: 768px) { 

    .container { 
     position: relative; 
     background:#000; 
     width: 300px; 
     height: 300px; 
     clear:both; 
     display: inline-block; 
     } 

    .img1{ 
     position:absolute; 
     top:0; 
     left:0; } 

    .img2{ 
     position:absolute; 
     top:0; 
     left:0; } 

    .img3{ 
     position:absolute; 
     top:0; 
     left:0; } 

    .img4{ 
     position:absolute; 
     top:0; 
     left:0; } 

    .img5{ 
     position:absolute; 
     top:0; 
     left:0; } 
    } 

Eine andere Lösung wäre

 

    .logos .container { 
     position: relative; } 

    .logos .container img { 
     width: 100%; 
     height: auto; } 
    @media only screen and (min-width: 0px) and (max-width: 768px) { 

    .img2{ 
     position:absolute; 
     top:0; 
     left:0; } 

    .img3{ 
     position:absolute; 
     top:0; 
     left:0; } 

    .img4{ 
     position:absolute; 
     top:0; 
     left:0; } 

    .img5{ 
     position:absolute; 
     top:0; 
     left:0; } 
    } 

die unten sein, wie die oben genannten Arbeiten ist durch das erste Bild zu verlassen, wie statisch. Der Container hat also noch etwas drin.

PS. Das backgorund # 000 ist nur so, dass Sie sehen können, was vor sich geht. entfernen Sie das,