Адаптивные картинки

* { 
  margin: 0; 
  padding: 0; 
} 
 
.container { 
 
    z-index: 0; 
    overflow: hidden; 
 
   width: 100%; 
   height: 100%; 
 
} 
/* Отсюда копируйте стили */ 
.left-col, /* левая колонка */ 
.right-col/* правая колонка */ 
{ 
    width: 50%;    /* ширина */ 
    min-width: 180px;  /* минимальная ширина сужения */ 
    height: auto;  /* высота */ 
    box-sizing: border-box; 
    float: left; /* плавающие блоки */ 
} 
 
 
/*Стили для адаптивных картинок*/ 
.img-responsive{ 
    display: block; 
    width: 100%; /* ширина, размеры в процентах*/ 
    height: 100%; 
} 
 
/*Cтили для маленьких мониторов*/ 
@media (max-width: 479px){ 
.left-col, /* левая колонка */ 
.right-col/* правая колонка */ 
    { 
        width: 100%;    /* ширина */ 
    } 
    .right-col{ 
        padding-left: 0px; /* отступ слева */ 
    } 
} 
/* clearfix сбрасывает float*/ 
.clearfix:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
}

<div class="container"> 
 
<!-- НАЧАЛО --> 
<!-- левая колонка --> 
<div class="left-col"> 
    <img src="https://cs8.pikabu.ru/post_img/big/2016/01/28/1/1453932354132797181.jpg" alt="..." class="img-responsive"> 
</div> 
 
<!-- правая колонка --> 
<div class="right-col"> 
    <img src="https://cs8.pikabu.ru/post_img/big/2016/01/28/1/1453932354132797181.jpg" alt="..." class="img-responsive"> 
 
</div> 
<!-- отмена float --> 
<div class="clearfix"></div> 
<!-- ОКОНЧАНИЕ --> 
 
<!-- НАЧАЛО --> 
<!-- левая колонка --> 
<div class="left-col"> 
  <img src="https://cs8.pikabu.ru/post_img/big/2016/01/28/1/1453932354132797181.jpg" alt="..." class="img-responsive"> 
 
</div> 
 
<!-- правая колонка --> 
<div class="right-col"> 
    <img src="https://cs8.pikabu.ru/post_img/big/2016/01/28/1/1453932354132797181.jpg" alt="..." class="img-responsive"> 
 
</div> 
<!-- отмена float --> 
<div class="clearfix"></div> 
<!-- ОКОНЧАНИЕ --> 
 
 
</div>