css - 当窗口大小减小时自动缩小图像(并保持内联)

Question

我在一个 div 中垂直对齐了三个图像。当浏览器缩小时，第三个图像不再适合 div 导致该图像下降到第二行。我在 CSS 中使用了自动和 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% 宽度)

最后一条规则，主要是绝对位置对于叠加图像很重要，其余/实际位置由您决定。