Отзывчивый div с изображениями

Question

У меня 3 изображения в div, расположенных горизонтально. Когда я изменяю размер страницы, изображения меняют свое положение и плавают в вертикальном выравнивании. Я хочу, чтобы страница реагировала, и когда я изменяю размер страницы, я хочу, чтобы весь div был адаптирован и изменен. Мне также нужно поставить на страницу другие div с другими изображениями. Я хочу, чтобы изображения выравнивались в нижней части. Помогите мне, пожалуйста? Это пример кода.

.box{ 
 
    display: inline-block; 
 
    position: relative; 
 
    bottom:100%; 
 
    width: 100%; 
 
    margin: 5% 5% 0 0; 
 
    font-size: 12px; \t 
 
} 
 
.box:before{ 
 
    content: ""; 
 
    display: block; 
 
    padding-top: 100%; 
 
} \t 
 
img { 
 
    max-width:100%; 
 
    height:auto; 
 
    border:1px solid black; 
 
    text-align:center; 
 
} 
 
.content{ 
 
    /* Positioning */ 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 

 
    /* Styling */ 
 
    border:1px solid; 
 
    padding: 30px; 
 
    text-align: center; 
 
    vertical-align: center; 
 
    text-transform: uppercase; 
 
    color: #fff; 
 
}

<div class="box"> 
 
    <div class="content"> 
 
     <img src="http://fantapr.altervista.org/paul.jpg" width="350px"> 
 
     <img src="http://fantapr.altervista.org/paul.jpg" width="350px"> 
 
     <img src="http://fantapr.altervista.org/paul.jpg" width="350px"> 
 
    </div> 
 
</div>

сильный текст

Answer 1

Просто добавьте к этому img:

См скрипку https://jsfiddle.net/16q2xr8k/27/

img { 
    width: calc((100%/3) - 2px); 
    height: auto; 
    border: 1px solid black; 
    text-align: center; 
}