覆盖图像限制的最大宽度和最大高度

请参阅下面的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; 
}

来源

2016-02-26 Kevin M

您可以使用弹性，非常乐于助人这里：

.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; 
 
    
 
}

<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>

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

.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; 
 
    
 
}

<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>

来源

2016-02-26 20:03:29

的伟大工程，THX！将更多的读... –

@KevinM的想法是有图像容器包装/收缩其内容:)柔性使得它如果孩子是边缘自动没有弹性规则，内联块，内联表和桌子，但桌子不会站在基线上... –

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

.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; 
 
}

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

 
<br/><br/> 
 

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

来源

2016-02-26 20:16:25

覆盖图像限制的最大宽度和最大高度

回答

相关问题