響應格與圖像

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