根據響應圖像更改蒙版高度

Question

嘗試將響應圖像的高度複製到第一次加載時的蒙版和每次窗口大小調整時出現問題。我已經嘗試了幾個js腳本，但仍然無法實現。

無論視口的屏幕大小如何，它都是一個真正的響應式圖像滑塊，其div（遮罩）正好位於其上。

這是我的jQuery腳本：

function maskInit(){ 
    var offsetDots = $("#slide").offset().top + $("#slide").height() + "px"; 
    $("#mask").height() = offsetDots; 
} 
$(document).ready(function() { 
maskInit(); 
}); 
$(window).resize(function(){ 
    maskInit(); 
}); 

和我的CSS：

#slide{ 
    height: 10vw; /* to simulate a responsive image */ 
    width: 100%; 
    margin: 0; 
    padding: 0; 
    background: red; 
    z-index: 0; 
} 
#mask{  
    position: absolute; 
    z-index: 1; 
    top: 0; 
    right: 0; 
    left: 0; 
    background: gray; 
    opacity: 0.8; 
} 

I've setup a jsFiddle here to simulate my problem

Answer 1

也有一些是錯誤的腳本。

您不設置mask高度與此：

$("#mask").height() = offsetDots; 

檢查jQuery .height()

相反，使用這種方式：

$("#mask").height(offsetDots); 

，或者你可以通過CSS設置：

$("#mask").css({"height":offsetDots}); 

Here's your updated jsFIDDLE demo

Answer 2

.height()是一個函數，所以你不能做$("#mask").height() = offsetDots;使用$("#mask").height(offsetDots);或.css({"height":offsetDots})設置高度。