窗口大小减小时自动收缩图像(并保持联机)

Question

我有三个图像在div中垂直对齐。当浏览器收缩时，第三个图像不再适合div，导致该图像下降到第二行。我在CSS中使用了auto和100%的宽度和高度属性，但它既没有保持图像的内联，也没有调整图像的大小。有人知道怎么解决这个问题吗？

<div class="media">
    <img class="media_image" src="source1_name">
    <p>Some text that overlays the image</p>                            
</div>
<div class="media">
    <img class="media_image" src="source2_name">    
    <p>Some text that overlays the image</p>                
</div>
<div class="media">
    <img class="media_image" src="source3_name">    
    <p>Some text that overlays the image</p>                        
</div>      
.media {
    display: inline-block;
    position: relative;
    vertical-align: top;
    margin-left: 16px;
    }
 .media img {
    width: auto;
    height: auto;
    }
.media_image { 
    display: block; 
    }

Answer 1

试试这个：

.media {
    box-sizing: border-box;
    display: inline-block;
    position: relative;
    vertical-align: top;
    width: 33,33%;
    margin-left: 16px;
    }
 .media img {
    width: 100%;
    height: auto;
    }
.media p {
   position: absolute;
   left: 0;
   bottom: 20px;
   }

它将元素宽度设置为父元素（主体？）的三分之一，将图像宽度设置为这三个元素的全宽，当父容器在较小的屏幕上收缩时（例如，宽度为100%）

在最后一条规则中，为了覆盖图像，主要是绝对位置很重要，其余/实际位置由您决定。