受最大寬度和最大高度限制的圖像上的疊加

Question

請參閱下面的jsFiddle示例。 我有一個需要在容器內垂直和/或水平對齊的圖像。 該圖像也受最大高度或最大寬度的限制。 我想在圖像（而不是容器）的右下角覆蓋一個“持續時間”。 無法正常工作，可以使用一些幫助。

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，對您非常有幫助：

 .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 （或者最終是inline-table）

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

Answer 2

您可以在圖片和時長周圍添加代碼嗎？ 如果是這樣的話：

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