响应格与图像

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