CSS Наложение изображений на определенный размер экрана

Question

Так что я хочу наложить несколько изображений друг на друга, но только при просмотре веб-сайта на iPad/iPhone.

Я написал следующий код, который работает как должен сам. Однако, когда добавлена ​​функция @media, ничего не происходит.

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

Вам нужно добавить ширину и высоту вашего контейнера, если вы хотите, чтобы это работало, поскольку нет в настоящее время ничто так изображение абсолютное, но для чего, поскольку контейнер не имеет установленной высоты. так что мой sugesstion чтобы узнать текущую высоту, которая отлично подходит для ваших изображений, например,

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

Другим решением будет ниже

 

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

Как вышеуказанные работы является оставляя первое изображение как статичный. поэтому в контейнере есть что-то еще.

PS. backgorund # 000 - это просто, чтобы вы могли видеть, что происходит. удалить это,