Resize image according to device size

Asked

Viewed 1,047 times

0

I have an image that has by dimensions 360 x 640 pixels and should be used as background of a div. At first div will occupy the entire screen of the device.

Situation

Due to my application being mainly aimed at mobiles I need to adapt this image to the following cases:

  • To be the screen size when the screen width is less than 360 pixels.
  • Center and maintain original size when screen width is greater than 360 pixels.

Current

// ESTA FUNÇÃO É PARA AJUSTAR A TELA

teste = (function($){
    
    var html = 
    '<div id="debug_window">'+
        '<form action="javascript:void(0)">'+
            '<input type="text" name="resize" value="370x500">'+
            '<input type="submit" value="Resize">'+
        '</form>'+
    '</div>'

    var init = function(){
        this.init();
    }

    init.prototype = {
        init : function(){
            var div = document.createElement('div');
            div.innerHTML = html;
            document.body.appendChild(div);
            this.events();
            this.resize();
        },
        resize : function(){
            var value = $('#debug_window input[name="resize"]').val();
            var width = value.split('x')[0];
            var height = value.split('x')[1] || null;
            $('.content_window').css('width', width);
            if(height){
                $('.content_window').css('height', height);
            }
        },
        events : function(){
            var self = this;
            $('#debug_window').on('submit', 'form', function(){
                self.resize();
            });
        }
    }

    new init();
}(jQuery));
/*BORDA VISUAL DO TAMANHO DA TELA*/
.border_debug{
    border: 1px solid #000;
}

/*INPUT PARA DEFINIR O TAMANHO DA TELA*/
#debug_window{
    position: fixed;
    top: 5px;
    right: 5px;
}

.content_window{
    margin: 0 auto;
}

/*DIVS PARA CENTRALIZAR O CONTEUDO A VERTIVAL*/
.align_table.table{
    width: 100%;
    height: 100%;
    display: table;
}

.align_table .cell{
    vertical-align: middle;
    display: table-cell;
}

/*IMAGEM A SER ADAPTADA*/
.background{
    height: 100vh; /*AQUI É A ALTERA DA DIV QUE DEVE SER MAIR QUE max-height*/
    max-width: 360px;   /*AQUI VOCÊ LIMITA A DIMENSÃO MAXIMA DA DIV, QUE DEVE SEGUIR O TAMANHO MAXIMO DA IMAGEM*/
    max-height: 640px;
    background-image: url('https://i.stack.imgur.com/cDkcg.jpg');
    background-color: #0068A6;
    background-size: 100% auto; /*ESTA PARTE FAZ COM A IMAGEM SE ADAPTE A DIV MANTENDO A LARGURA E AJUSTANDO A ALTURA*/
    background-repeat: no-repeat;
    margin:0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="align_table table"> <!-- AQUI APENAS ESTOU CENTRALIZANDO VERTICALMENTE A VISUALIZAÇÃO DO TAMANHO DA TELA -->
    <div class="cell">
        <div class="content_window border_debug">
            <div class="align_table table">
                <div class="cell">
                    <div class="background"></div>
                </div>
            </div>
        </div>
    </div>
</div>

html css

1 answer

0


Development via JS

function resizeImg(){
    // DIMENSÕES PADRÕES
    var defaultIMG = {
        w : 360,
        h : 640
    }

    // PEGA O TAMANHO DA TELA (NESSE CASO content_window)
    var w = document.querySelector('.content_window').offsetWidth;
    // VERIFICA QUAL O TAMANHO MENOS, O DA IMAGEM OU O DA TELA
    var width = (defaultIMG.w > w) ? w : defaultIMG.w;

    // PROPORÇÃO ENTRE ATUAL E ORIGINAL
    var p = width / defaultIMG.w;

    // DEFINE AS DIMENSÕES DA IMAGEM
    var size = {
        w : width,
        h : defaultIMG.h * p
    }

    // DEFINE O TAMANHO NO background
    var bg = document.querySelector('.apresentation .background');
    bg.style.width = size.w+'px';
    bg.style.height = size.h+'px';
}
window.onload = function(){
    resizeImg();
}

Adapting in the current

function resizeImg(){
    // DIMENSÕES PADRÕES
    var defaultIMG = {
        w : 360,
        h : 640
    }

    // PEGA O TAMANHO DA TELA (NESSE CASO content_window)
    var w = document.querySelector('.content_window').offsetWidth;
    // VERIFICA QUAL O TAMANHO MENOS, O DA IMAGEM OU O DA TELA
    var width = (defaultIMG.w > w) ? w : defaultIMG.w;

    // PROPORÇÃO ENTRE ATUAL E ORIGINAL
    var p = width / defaultIMG.w;

    // DEFINE AS DIMENSÕES DA IMAGEM
    var size = {
        w : width,
        h : defaultIMG.h * p
    }

    // DEFINE O TAMANHO NO background
    var bg = document.querySelector('.background');
    bg.style.width = size.w+'px';
    bg.style.height = size.h+'px';
}
window.onload = function(){
    resizeImg();
}

// ESTA FUNÇÃO É PARA AJUSTAR A TELA

teste = (function($){
    
    var html = 
    '<div id="debug_window">'+
        '<form action="javascript:void(0)">'+
            '<input type="text" name="resize" value="370x500">'+
            '<input type="submit" value="Resize">'+
        '</form>'+
    '</div>'

    var init = function(){
        this.init();
    }

    init.prototype = {
        init : function(){
            var div = document.createElement('div');
            div.innerHTML = html;
            document.body.appendChild(div);
            this.events();
            this.resize();
        },
        resize : function(){
            var value = $('#debug_window input[name="resize"]').val();
            var width = value.split('x')[0];
            var height = value.split('x')[1] || null;
            $('.content_window').css('width', width);
            if(height){
                $('.content_window').css('height', height);
            }
        },
        events : function(){
            var self = this;
            $('#debug_window').on('submit', 'form', function(){
                self.resize();
                if(typeof resizeImg == 'function'){
                    resizeImg();
                }
            });
        }
    }

    new init();
}(jQuery));
/*BORDA VISUAL DO TAMANHO DA TELA*/
.border_debug{
    border: 1px solid #000;
}

/*INPUT PARA DEFINIR O TAMANHO DA TELA*/
#debug_window{
    position: fixed;
    top: 5px;
    right: 5px;
}

.content_window{
    margin: 0 auto;
}

/*DIVS PARA CENTRALIZAR O CONTEUDO A VERTIVAL*/
.align_table.table{
    width: 100%;
    height: 100%;
    display: table;
}

.align_table .cell{
    vertical-align: middle;
    display: table-cell;
}

/*IMAGEM A SER ADAPTADA*/
.background{
    height: 100vh; /*AQUI É A ALTERA DA DIV QUE DEVE SER MAIR QUE max-height*/
    max-width: 360px;   /*AQUI VOCÊ LIMITA A DIMENSÃO MAXIMA DA DIV, QUE DEVE SEGUIR O TAMANHO MAXIMO DA IMAGEM*/
    max-height: 640px;
    background-image: url('https://i.stack.imgur.com/cDkcg.jpg');
    background-color: #0068A6;
    background-size: 100% auto; /*ESTA PARTE FAZ COM A IMAGEM SE ADAPTE A DIV MANTENDO A LARGURA E AJUSTANDO A ALTURA*/
    background-repeat: no-repeat;
    margin:0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="align_table table"> <!-- AQUI APENAS ESTOU CENTRALIZANDO VERTICALMENTE A VISUALIZAÇÃO DO TAMANHO DA TELA -->
    <div class="cell">
        <div class="content_window border_debug">
            <div class="align_table table">
                <div class="cell">
                    <div class="background"></div>
                </div>
            </div>
        </div>
    </div>
</div>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.