無法將懸停覆蓋圖的高度設置爲容器的100％

我正在使用Instafeed.js插件並試圖設置「喜歡」懸停覆蓋圖以填充整個圖像框，但是，我正在努力設置身高達到100％。無法將懸停覆蓋圖的高度設置爲容器的100％

我試圖避免將容器的高度設置爲像素值，因爲整個插件當前都是響應式的。

我環顧四周，嘗試了display和position值的不同組合，但這主要是試驗和錯誤。

CSS：

#instafeed { 
    width: 100%; 
    margin-bottom: 80px; 
} 
#instafeed a { 
    position: relative; 
} 
#instafeed .ig-photo { 
    width: 25%; 
    vertical-align: middle; 
} 
#instafeed .likes { 
    width: 100%; 
    height: auto; 
    top: 0; 
    left: 0; 
    right: 0; 
    position: absolute; 
    background: #f18a21; 
    opacity: 0; 
    font-family: 'LinotypeUniversW01-Thin_723604', Arial, sans-serif; 
    font-size: 28px; 
    color: #ffffff; 
    line-height: 100%; 
    text-align: center; 
    text-shadow: 0 1px rgba(0, 0, 0, 0.5); 
    -webkit-font-smoothing: antialiased; 
    -webkit-transition: opacity 100ms ease; 
    -moz-transition: opacity 100ms ease; 
    -o-transition: opacity 100ms ease; 
    -ms-transition: opacity 100ms ease; 
    transition: opacity 100ms ease; 
} 
#instafeed a:hover .likes { 
    opacity: 0.8; 
}

演示：http://jsfiddle.net/rc1wj5t9/

任何幫助/建議將不勝感激！

來源

2015-11-20 Mario Parra

雖然我可以訪問您的jsfiddle，但結果窗格是空白的 - 它是空白，你呢？ – user454038

嗯不，我剛查過，我看到八張Instagram照片。對不起，不知道它有什麼問題。 –

我可以看到並使用小提琴。試圖找出解決方案:) – magreenberg

這是因爲錨元素默認爲inline，這意味着它們不會繼承子元素的高度img。

一種可能的解決方案是將錨元素的display設置爲inline-block，並指定寬度25%。然後爲孩子img元素，設置100%的max-width：

Updated Example

#instafeed a { 
    position: relative; 
    display: inline-block; 
    max-width: 25%; 
} 
#instafeed .ig-photo { 
    max-width: 100%; 
    vertical-align: middle; 
} 
#instafeed .likes { 
    width: 100%; 
    height: auto; 
    top: 0; right: 0; 
    bottom: 0; left: 0; 
}

要居中的文本，我用techniques for vertically/horizontally centering text的一個我以前的答案之一。

#instafeed .likes > span { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translateX(-50%) translateY(-50%); 
    white-space: nowrap; 
}

來源

2015-11-20 03:43:14

這是有道理的。感謝您的解釋！我將不得不閱讀更多默認的'display'值。 –

這是我如何修復它。

CSS

#instafeed { 
    width: 100%; 
    margin:0px; 
} 
#instafeed a { 
    position: relative; 
    display:inline-block; 
    float:left; 
    width: 25%; 
} 
#instafeed .ig-photo { 
    width: 100%; 
    vertical-align: middle; 
} 
#instafeed .likes { 
    position: absolute; 
    width: 100%; 
    opacity: 0; 
    font-family: 'LinotypeUniversW01-Thin_723604', Arial, sans-serif; 
    font-size: 28px; 
    color: #ffffff; 
    text-align: center; 
    top: 50%; 
    transform: translateY(-50%); 
    text-shadow: 0 1px rgba(0,0,0,0.5); 
    -webkit-font-smoothing: antialiased; 
    -webkit-transition: opacity 100ms ease; 
    -moz-transition: opacity 100ms ease; 
    -o-transition: opacity 100ms ease; 
    -ms-transition: opacity 100ms ease; 
    transition: opacity 100ms ease; 
    z-index:10; 
} 
#instafeed a:hover .likes { 
    opacity: 1; 
} 
#instafeed a:hover::after{ 
    content:""; 
    position:absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; left: 0; 
    background: #f18a21; 
    opacity:0.7; 
    z-index: 5; 
}

updated fiddle

來源

2015-11-20 03:47:57 magreenberg

感謝您的幫助！ –

無法將懸停覆蓋圖的高度設置爲容器的100％

回答

相關問題