當窗口大小減少時自動收縮圖像（並保持內聯）

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％）

在最後一條規則中，絕對位置主要是爲了覆蓋圖像，其餘/實際位置要達到您。