使用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中缺少什么，以便覆盖＆＃34;锁定＆＃34;与图像？谢谢！

Answer 1

将父容器的宽度设置为等于图像大小。

＆＃13;

＆＃13;

 a.picture {
      position: relative; 
       width: 360px;
       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;
      top: 50%;
      transform: translateY(-50%);
    }
    
    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; 
    }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;