Как сделать баннер адаптивным только по высоте?

228
04 мая 2018, 12:20

Нужно создать html-5 баннер в Adobe Animate с фиксированной шириной (300px) и адаптивной высотой (минимальная высота должна оставаться 600px). Animate при настройке публикации сгенерировал html с таким вот скриптом

    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();
}

Однако этот код в итоге растягивает этот баннер при изменении высоту и ширину и делает его меньше 600 px по высоте. Как переписать функцию можно?

READ ALSO
Сетка типа bootstrap только на 1920px

Сетка типа bootstrap только на 1920px

Кто то использовал 12 колоночную сетку только не на 1200px, а на 1920pxНе full-page, а именно 1920 ? Или для таких задач лучше создавать свою сетку ? Кто сталкивался?

206
не срабатывает скрипт на клик по кнопке

не срабатывает скрипт на клик по кнопке

при клике на процессор открывается модальное окно, и если кликать по кнопке в модальном этот скрипт не срабатывает

215
При подключении API Telegram к node.js

При подключении API Telegram к node.js

Помогите пожалуйста! Установил программу Nodejs, потом создал папку, установил в нее сервер nvm (команда npm init), далее туда же установил библиотеку...

221
Добавления класса

Добавления класса

Всем привет помогитеУ меня есть несколько тегов strong и у них нету классов

205