0
上浆我有一个文本覆盖一个Flexbox的顶部,一切看起来正常时,浏览器是全宽:文本覆盖不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缺失,使得与图像叠加“锁”?谢谢!
奏效!快速跟进问题,有没有办法使用flexboxes,使图像是相同的宽度和高度,没有指定实际的高度和宽度尺寸? – Dave
你的意思是相同的宽度和高度?一个正方形?另外,“没有指定实际的高度和宽度尺寸”是什么?图片?还是父母? –
所以不是我指定的宽度是360px,高度是238px例如,有没有办法只使用flexbox,以便所有图像都是相同的尺寸。我希望图像能够填充父项的整个空间,但我希望父母的尺寸相同,这是否合理? – Dave