覆蓋圖像限制的最大寬度和最大高度

請參閱下面的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

覆蓋圖像限制的最大寬度和最大高度

回答

相關問題