Para manter uma div
com um background-image
responsivo e na proporção, você deve fazer o seguinte.
Digamos que você tem uma imagem com o tamanho de 2000 x 1250, e quer manter essa proporção em qualquer tamanho de tela ou em qualquer espaço:
A formula que você deve usar é (altura / largura) * 100
, então temos: (1250 / 2000) * 100 = 62.5
.
Esse valor deve ser definido como porcentagem no padding-bottom
da div que irá ter a imagem de fundo, mas você não deve passar nenhuma altura, deixe como 0
.
Depois é só definir o background-size
como cover
para manter a imagem do mesmo tamanho da div
.
Veja o exemplo abaixo funcionando em https://jsfiddle.net/diancabral/mhfb24q2/1/
HTML:
<div class="img__box">
<div class="img__src"></div>
</div>
CSS:
.img__box {
float: left;
width: 50%;
}
.img__src {
float: left;
/* Deve pegar a largura do elemento pai */
width: 100%;
/* O height é zero mesmo, a altura vai ser definida no padding-bottom */
height: 0;
/* Aqui você deve colocar o resultado da formula como porcentagem */
padding-bottom: 62.5%;
background: url(http://folhanobre.xyz/2015/09/Paisagem_imagem_linda_-52.jpg);
background-size: cover;
}
Se você quiser fazer isso com imagens em pé, é só inverter a formula e calcular (largura / altura) * 100
.