如何制作一个高度为100%的html-5横幅？

Question

我想做一个固定宽度(300像素)的横幅，但高度自适应(最小高度应保持600像素)。我在Adobe Animate中创建了我的横幅，并生成了此代码，但此函数可同时更改高度和宽度，并且不会使高度大于600px。请帮我更改一下这个函数

    function makeResponsive(isResp, respDim, isScale, scaleType) {      
    var lastW, lastH, lastS=1;      
    window.addEventListener('resize', resizeCanvas);        
    resizeCanvas();     
    function resizeCanvas() {           
        var w = lib.properties.width, h = lib.properties.height;            
        var iw = window.innerWidth, ih=window.innerHeight;          
        var pRatio = window.devicePixelRatio || 1, xRatio=iw/w, yRatio=ih/h, sRatio=1;          
        if(isResp) {                
            if((respDim=='width'&&lastW==iw) || (respDim=='height'&&lastH==ih)) {                    
                sRatio = lastS;                
            }               
            else if(!isScale) {                 
                if(iw<w || ih<h)                        
                    sRatio = Math.min(xRatio, yRatio);              
            }               
            else if(scaleType==1) {                 
                sRatio = Math.min(xRatio, yRatio);              
            }               
            else if(scaleType==2) {                 
                sRatio = Math.max(xRatio, yRatio);              
            }           
        }           
        canvas.width = w*pRatio*sRatio;         
        canvas.height = h*pRatio*sRatio;
        canvas.style.width = dom_overlay_container.style.width = anim_container.style.width =  w*sRatio+'px';               
        canvas.style.height = anim_container.style.height = dom_overlay_container.style.height = h*sRatio+'px';
        stage.scaleX = pRatio*sRatio;           
        stage.scaleY = pRatio*sRatio;           
        lastW = iw; lastH = ih; lastS = sRatio;            
        stage.tickOnUpdate = false;            
        stage.update();            
        stage.tickOnUpdate = true;      
    }
}
makeResponsive(true,'height',false,2);  
AdobeAn.compositionLoaded(lib.properties.id);
fnStartAnimation();

}

Answer 1

更新

请试一下这个。此代码仅调整画布高度，不接触舞台。

function resizeCanvas() {         
    var w = lib.properties.width, h = lib.properties.height;            
    var iw = window.innerWidth, ih=window.innerHeight;          
    var pRatio = window.devicePixelRatio || 1, xRatio=iw/w, yRatio=ih/h, sRatio=1;          
    if(isResp) {          
        // added these 4 lines     
        if(yRatio>1)
            sRatio = yRatio;
        else
            sRatio = 1;

        // commented this out
        // if((respDim=='width'&&lastW==iw) || (respDim=='height'&&lastH==ih)) {                    
        //  sRatio = lastS;                
        // }                
        // else if(!isScale) {                  
        //  if(iw<w || ih<h)                        
        //      sRatio = Math.min(xRatio, yRatio);              
        // }                
        // else if(scaleType==1) {                  
        //  sRatio = Math.min(xRatio, yRatio);              
        // }                
        // else if(scaleType==2) {                  
        //  sRatio = Math.max(xRatio, yRatio);              
        // }            
    }           

        // canvas.width = w*pRatio*sRatio;          
        canvas.height = h*pRatio*sRatio;
        // canvas.style.width = dom_overlay_container.style.width = anim_container.style.width =  w*sRatio+'px';                
        canvas.style.height = anim_container.style.height = dom_overlay_container.style.height = h*sRatio+'px';
        // stage.scaleX = pRatio*sRatio;            
        // stage.scaleY = pRatio*sRatio;            
        lastW = iw; lastH = ih; lastS = sRatio;            
        stage.tickOnUpdate = false;            
        stage.update();            
        stage.tickOnUpdate = true;      
}

这段代码与Animate发布的代码相同，除了：

• 添加了4 lines
• Commented out IF block
• Commented out canvas.width stage scaling

下面的旧答案

好的，谢谢你的信息。尝尝这个。我更新了"resizeCanvas()“函数：

function resizeCanvas() {           
        var w = lib.properties.width, h = lib.properties.height;            
        var iw = window.innerWidth, ih=window.innerHeight;          
        var pRatio = window.devicePixelRatio || 1, xRatio=iw/w, yRatio=ih/h, sRatio=1;          
        if(isResp) {          
            // added these 4 lines     
            if(yRatio>1)
                sRatio = yRatio;
            else
                sRatio = 1;

            // commented this out
            // if((respDim=='width'&&lastW==iw) || (respDim=='height'&&lastH==ih)) {                    
            //  sRatio = lastS;                
            // }                
            // else if(!isScale) {                  
            //  if(iw<w || ih<h)                        
            //      sRatio = Math.min(xRatio, yRatio);              
            // }                
            // else if(scaleType==1) {                  
            //  sRatio = Math.min(xRatio, yRatio);              
            // }                
            // else if(scaleType==2) {                  
            //  sRatio = Math.max(xRatio, yRatio);              
            // }            
        }           

        // canvas.width = w*pRatio*sRatio;          -- commented this out
        canvas.width = w*pRatio;                    // replaced with this
        canvas.height = h*pRatio*sRatio;
        // canvas.style.width = dom_overlay_container.style.width = anim_container.style.width =  w*sRatio+'px';            -- commented this out
        canvas.style.width = dom_overlay_container.style.width = anim_container.style.width =  w+'px';                      // replaced with this
        canvas.style.height = anim_container.style.height = dom_overlay_container.style.height = h*sRatio+'px';
        // stage.scaleX = pRatio*sRatio;        -- commented this out
        stage.scaleX = pRatio;                  // replaced with this
        stage.scaleY = pRatio*sRatio;           
        lastW = iw; lastH = ih; lastS = sRatio;            
        stage.tickOnUpdate = false;            
        stage.update();            
        stage.tickOnUpdate = true;      
    }

我在这里做了几件事：

• 仅在yRatio (height)大于1时缩放，否则默认缩放比率(SRatio)为1。
• 在width

上禁用缩放

如果这就是你要找的，请告诉我。