Question

我尝试创建一个包含两个类的图元素的图库：.portrait和.landscape。 .portrait应占据容器宽度的25％，而.landscape应占宽度的50％。然后我想在每个图中放置一个图像，使用object-fit: cover来覆盖元素。容器是一个弹性盒容器。

只需处理图像，一切都很完美。我让它们具有指定的宽度，然后自动具有一致的高度，以便每一行看起来高度相同。但是，我想为每个数字添加标题，但是这样做时，标题会被图像重叠。

有没有办法让没有重叠的字幕，与自动高度保持相同的行为？我已尝试将容器设置为align-items: flex-start，然后使标题不重叠，相反，高度与高度超过{{1}的.portrait类不一致}}

这是我目前所拥有的HTML和CSS：

＆＃13;

.landscape

＆＃13;

#container {
  width:100%;
  display:flex;
  flex-wrap:wrap;
}

figure {
  margin:0;  
}

figure.portrait {
  width:25%;
}

figure.landscape {
  width:50%;
}

figure img {
  width:100%;
  height:100%;
  object-fit:cover;
}

＆＃13;

这是CodePen：https://codepen.io/anon/pen/YEPxqB

使用flexbox容器在<figure>中为图像添加标题

0 个答案: