I have an image that is 360 x 640 pixels and should be used as a background of a div
. At first, div
will occupy the entire device screen.
Situation
Because of my application being primarily for mobiles, I need to adapt this image for 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><divclass="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>