在由max-width和max-height约束的图像上叠加

Question

请参阅下面的jsFiddle示例。我有一个图像需要在容器内垂直和/或水平对齐。该图像也受到最大高度或最大宽度的约束。我想覆盖一个＆＃34;持续时间＆＃34;在图像的右下角（不是容器）。无法正常工作并可以使用一些帮助。

JSFiddle

HTML

<div class="thumbnail-container">
  <div class="image-container">
    <img src="http://iss.ku.edu/sites/iss.ku.edu/files/images/galleries/video.bmp"/>
    <span class="duration">00:00:30</span>
  </div>
</div>

<br/><br/>

<div class="thumbnail-container">
  <div class="image-container">
    <img src="https://image.freepik.com/free-photo/sky--horizontal_19-121673.jpg"/>
    <span class="duration">00:00:30</span>
  </div>
</div>

CSS

.thumbnail-container {
  border: 1px solid red;
  width: 300px;
  height: 150px;
  text-align: center; 
  margin: 1em 0;
  line-height: 150px;
}

.image-container {
  position: relative;
}

.image-container img {
  vertical-align: middle;
  max-width: 300px;
  max-height: 150px;
}

Answer 1

你可以使用flex，非常有帮助：

＆＃13;

＆＃13;

.thumbnail-container {
  border: 1px solid red;
  width: 300px;
  height: 150px;
  text-align: center; 
  margin: 1em 0;
  line-height: 150px;
  display:flex;
}

.image-container {
  position: relative;
  margin:auto;
}

.image-container img {
  display:block;
  max-width: 300px;
  max-height: 150px;
}

.duration {
  color: green;
  position: absolute;
  line-height:1.2em;
  right: 0;
  bottom: 0;
  
}

＆＃13;

<div class="thumbnail-container">
  <div class="image-container">
    <img src="http://iss.ku.edu/sites/iss.ku.edu/files/images/galleries/video.bmp"/>
    <span class="duration">00:00:30</span>
  </div>
</div>

<br/><br/>

<div class="thumbnail-container">
  <div class="image-container">
    <img src="https://image.freepik.com/free-photo/sky--horizontal_19-121673.jpg"/>
    <span class="duration">00:00:30</span>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

display:inline-block（或最终内联表）

＆＃13;

＆＃13;

.thumbnail-container {
  border: 1px solid red;
  width: 300px;
  height: 150px;
  text-align: center; 
  margin: 1em 0;
  line-height: 150px;
}

.image-container {
  position: relative;
  display:inline-block;/* inline-table works too if you  images in cells and row to center here*/
  vertical-align:middle;
}

.image-container img {
  display:block;
  max-width: 300px;
  max-height: 150px;
}

.duration {
  color: green;
  position: absolute;
  line-height:1.2em;
  right: 0;
  bottom: 0;
  
}

＆＃13;

<div class="thumbnail-container">
  <div class="image-container">
    <img src="http://iss.ku.edu/sites/iss.ku.edu/files/images/galleries/video.bmp"/>
    <span class="duration">00:00:30</span>
  </div>
</div>

<br/><br/>

<div class="thumbnail-container">
  <div class="image-container">
    <img src="https://image.freepik.com/free-photo/sky--horizontal_19-121673.jpg"/>
    <span class="duration">00:00:30</span>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以在图片和持续时间周围添加代码吗？如果是这样的话：

＆＃13;

＆＃13;

    # [filter size, stride, padding]

convnet =[[11,4,0],[3,2,0],[5,1,2],[3,2,0],[3,1,1],[3,1,1],[3,1,1],[3,2,0],[6,1,0]]
layer_name = ['conv1','pool1','conv2','pool2','conv3','conv4','conv5','pool5','fc6-conv']
imsize = 227


def outFromIn(isz, layernum = 9, net = convnet):
    if layernum>len(net): layernum=len(net)

    totstride = 1
    insize = isz
    #for layerparams in net:
    for layer in range(layernum):
        fsize, stride, pad = net[layer]
        outsize = (insize - fsize + 2*pad) / stride + 1
        insize = outsize
        totstride = totstride * stride

    RFsize = isz - (outsize - 1) * totstride

    return outsize, totstride, RFsize

if __name__ == '__main__':

    print "layer output sizes given image = %dx%d" % (imsize, imsize)
    for i in range(len(convnet)):
        p = outFromIn(imsize,i+1)
        print "Layer Name = %s, Output size = %3d, Stride = % 3d, RF size = %3d" % (layer_name[i], p[0], p[1], p[2])

＆＃13;

.thumbnail-container {
  border: 1px solid red;
  width: 300px;
  height: 150px;
  text-align: center; 
  margin: 1em 0;
  line-height: 150px;
}

.image-container {
  position: relative;
}

.image-container img {
  vertical-align: middle;
  max-width: 300px;
  max-height: 150px;
}

.duration {
  color: green;
  position: absolute;
  right: 0;
  bottom: 0;
}

/* additional styles */
.this-is-to-get-a-positioning-context {
  position: relative;
  border: 1px solid green;
  display: inline-block;
}

.this-is-to-get-a-positioning-context {
  line-height: 1em;
}

＆＃13;

＆＃13;

＆＃13;