Как сохранить оригинальный размер background-image?

Question

[Berkutman]

Всем привет. есть бэкрануд, адаптировал его подкаждый размер экрана через запросы @mediа

Но дело в том, что приходиться подстраивать его параметрами padding.
Как сделать.что бы под каждые размеры экрана он сам сужался,но сохранял свои размеры?

Вот,что я натыкал. На мобильном все отлично, там другое изображение.

/*Фон главная */

.headerbk{
     
    
  background-repeat: no-repeat;          

background-size: cover;
box-shadow:1px -20px 29px 0px rgba(52,62,89,0.71)inset;
-webkit-box-shadow:1px -20px 29px 0px rgba(52,62,89,0.71)inset;
-moz-box-shadow:1px -20px 29px 0px rgba(52,62,89,0.71)inset;
    background-attachment: scroll;
}



@media (min-width: 320px) {   
.headerbk {     
    background-image: url(../img/gv.png);
    padding-bottom: 26rem;
    padding-top: 11px;

	
    	} 
}

@media (min-width: 360px) {   
.headerbk {     
    background-image: url(../img/gv.png);
    padding-bottom: 30rem;
    padding-top: -5rem;
    background-size: cover;
    background-attachment: scroll;
	    padding-top: 0px;
	
    	} 
}


@media (min-width: 480px) {   
.headerbk {     
background-image:url(../img/gv.png);
    	} 
}

@media (min-width: 767px) {   
.headerbk {     
background-image:url(../img/1.jpg); 
    padding-bottom: 30rem;  
    	} 
}



@media (min-width: 1024px) {   
.headerbk {background-image:url(../img/1.jpg);  
margin-top: 140px;
} 
}	



@media (min-width: 1280px)  {   
    background-image: url(../img/1.jpg);
    padding-top: 6rem;
    margin-top: 140px;
} 
}	

@media (min-width: 1366px)  {   
.headerbk {background-image:url(../img/1.jpg);  
padding-top: 10rem;  
margin-top: 140px;
} 
}	

@media (min-width: 1440px)  {   
.headerbk {background-image:url(../img/1.jpg);  
padding-top: 10rem;  
margin-top: 140px;
} 
}	


@media (min-width: 1600px)  {   
.headerbk {background-image:url(../img/1.jpg);  
    padding-top: 14rem;
    margin-top: 176px;
    padding-bottom: 31rem;
} 
}	

@media (min-width: 1920px)  {   
.headerbk {background-image:url(../img/1.jpg);  
padding-top: 20rem;  
margin-top: 176px;
} 
}

Answer 1

[dicem]

Не уверен, что правильно понял вопрос, но не про background-size: contain; ли идет речь?

Answer 2

[Роман Филиппов]

сам сужался,но сохранял свои размеры?

Отличная формулировка, может имеется в виду соотношение сторон?

Если так, то надо блок с фоном сделать фиксированного размера(либо фиксировать его пропорции), а потом уже

background-size: contain;