Question

我正在使用一些样式来确保图像以给定的宽高比显示。除了使用import wx class NamePrompts(wx.Frame): def __init__(self, *args, **kw): super(NamePrompts, self).__init__(*args, **kw) panl = wx.Panel(self) self.textboxtest = wx.TextCtrl(panl) # defining textboxtest as a text box #self.textboxtest.Bind(wx.EVT_TEXT, self.OnKeyTyped) read = wx.Button(panl, label="Print", pos=(0, 25)) read.Bind(wx.EVT_BUTTON, self.PrintText) def PrintText(self, event): typedtext = self.textboxtest.GetValue() # attempting to call the same textbox here print(typedtext) wx.StaticText(wx.Panel(self), label=typedtext, pos=(25, 25)) if __name__ == '__main__': app = wx.App() frm = NamePrompts(None, title='Basketball Game') frm.SetSize(50,50,300,300) frm.Show() app.MainLoop()之外，它的工作效果非常好。

检查器显示<figcaption>恰好位于图像下方，但由于<figcaption>的缘故，它没有显示。

如何修改它以显示padding-bottom？

编辑：我试图将标题显示在图像下方，而不是图像上方。

<figcaption>

figure, img {
  border-style: none;
  margin: 0;
  vertical-align: middle;
}

.media-container {
  overflow: hidden;

}

.media-container > :first-child {
  object-fit: cover;
  width: 100%;
  max-height: 100%;
}

[class*='aspect-ratio-'] {
  position: relative;
}

[class*='aspect-ratio-']::before {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.aspect-ratio-21x9::before {
  padding-bottom: 42.86%;
}

.aspect-ratio-16x9::before {
  padding-bottom: 56.25%;
}

.aspect-ratio-4x3::before {
  padding-bottom: 75%;
}

.aspect-ratio-1x1::before {
  padding-bottom: 100%;
}

[class*='aspect-ratio-'] > :first-child {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

figcaption {
  display: block;
  font-size: .8em;
  padding-top: .5em;
}

Answer 1

绝对定位figcation，并使overflow在父级可见

figure, img {
  border-style: none;
  margin: 0;
  vertical-align: middle;
}

.media-container {
  overflow: visible;
}

.media-container > :first-child {
  object-fit: cover;
  width: 100%;
  max-height: 100%;
}

[class*='aspect-ratio-'] {
  position: relative;
}

[class*='aspect-ratio-']::before {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.aspect-ratio-21x9::before {
  padding-bottom: 42.86%;
}

.aspect-ratio-16x9::before {
  padding-bottom: 56.25%;
}

.aspect-ratio-4x3::before {
  padding-bottom: 75%;
}

.aspect-ratio-1x1::before {
  padding-bottom: 100%;
}

[class*='aspect-ratio-'] > :first-child {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

figcaption {
  display: block;
  font-size: .8em;
  padding-top: .5em;
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translateY(100%);
  }

<figure class="media-container aspect-ratio-16x9">
  <img src="https://picsum.photos/id/1011/500/500" alt="Photo"/>
  <figcaption>This is a 16x9 image with a caption</figcaption>
</figure>

Answer 2

figcaption必须绝对定位。

这还需要从容器中删除overflow:hidden。

这可能会影响您的总体设计/页面流量。

figure,
img {
  border-style: none;
  margin: 0;
  vertical-align: middle;
}

.media-container {
  /* overflow: hidden; */
  /* Removed*/
  width: 25%;
  /* for demo purposes */
}

.media-container> :first-child {
  object-fit: cover;
  width: 100%;
  max-height: 100%;
}

[class*='aspect-ratio-'] {
  position: relative;
}

[class*='aspect-ratio-']::before {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.aspect-ratio-21x9::before {
  padding-bottom: 42.86%;
}

.aspect-ratio-16x9::before {
  padding-bottom: 56.25%;
}

.aspect-ratio-4x3::before {
  padding-bottom: 75%;
}

.aspect-ratio-1x1::before {
  padding-bottom: 100%;
}

[class*='aspect-ratio-']> :first-child {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

figcaption {
  display: block;
  font-size: 1em;
  padding-top: .5em;
  position: absolute;
  z-index: 2;
  color: red;
  top: 100%;
  left: 0;
  border: 1px solid red;
}


}

<figure class="media-container aspect-ratio-16x9">
  <img src="https://picsum.photos/id/1011/500/500" alt="Photo" />
  <figcaption>This is a 16x9 image with a caption</figcaption>
</figure>

Answer 3

我要添加

UseSolutionNavigatorGraphProvider

到position: absolute; bottom: 0;：

.figcaption

figure, img {
  border-style: none;
  margin: 0;
  vertical-align: middle;
}

.media-container {
  overflow: hidden;

}

.media-container > :first-child {
  object-fit: cover;
  width: 100%;
  max-height: 100%;
}

[class*='aspect-ratio-'] {
  position: relative;
}

[class*='aspect-ratio-']::before {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.aspect-ratio-21x9::before {
  padding-bottom: 42.86%;
}

.aspect-ratio-16x9::before {
  padding-bottom: 56.25%;
}

.aspect-ratio-4x3::before {
  padding-bottom: 75%;
}

.aspect-ratio-1x1::before {
  padding-bottom: 100%;
}

[class*='aspect-ratio-'] > :first-child {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

figcaption {
  display: block;
  font-size: .8em;
  padding-top: .5em;
  position: absolute;
  bottom: 0;
}

CSS：figcaption在图像下的位置

3 个答案: