文本覆蓋不Flexbox的

Question

上漿我有一個文本覆蓋一個Flexbox的頂部，一切看起來正常時，瀏覽器是全寬：

然而，當我縮小瀏覽器寬度較小，覆蓋變得比形象更廣泛：

我的HTML看起來像這樣：

<a ng-if="::(options.link_template == 'Picture')" ng-href="{{::data.href}}" class="picture {{::options.class_name}}" target="{{::data.target}}"> 
    <img src="{{::options.picture}}" alt="" width="100%" height="100%"/> 
    <h3><span>{{::options.title}}</span></h3> 
</a> 

我的CSS是這樣的：

a.picture { 
    position: relative; 
    //width: 100%; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
} 

a.picture img { 
    width: 360px; 
    height: 238px; 
} 

a.picture > h3 { 
    margin: 0; 
    position: absolute; 
    width: 100%; 
    text-align: center; 
} 

a.picture > h3 span { 
    display: block; 
    color: white; 
    font-weight: bold; 
    background: rgb(0, 0, 0); /* fallback color */ 
    background: rgba(51, 103, 150, 0.6); 
    padding: 10px; 
} 

什麼我從我的CSS缺失，使得與圖像疊加「鎖」？謝謝！

Answer 1

設置父容器的寬度等於圖像大小。

a.picture { 
 
     position: relative; 
 
     width: 360px; 
 
     display: flex; 
 
     \t flex-direction: column; 
 
     align-items: center; 
 
     justify-content: center; 
 
    } 
 
    
 
    a.picture img { 
 
    \t width: 360px; 
 
     height: 238px; 
 
    } 
 
    
 
    a.picture > h3 { 
 
    \t margin: 0; 
 
     position: absolute; 
 
    \t width: 100%; 
 
     text-align: center; 
 
     top: 50%; 
 
     transform: translateY(-50%); 
 
    } 
 
    
 
    a.picture > h3 span { 
 
    \t display: block; 
 
     color: white; 
 
     font-weight: bold; 
 
     background: rgb(0, 0, 0); /* fallback color */ 
 
     background: rgba(51, 103, 150, 0.6); 
 
     padding: 10px; 
 
    }

<a class="picture"> 
 
    <img src="https://static.pexels.com/photos/1510/road-sky-sand-street.jpg" width="100%" height="100%"/> 
 
    <h3><span>Content</span></h3> 
 
</a>