我正在使用一些样式来确保图像以给定的宽高比显示。除了使用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;
}
答案 0 :(得分:0)
绝对定位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>
答案 1 :(得分:0)
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>
答案 2 :(得分:0)
我要添加
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;
}