CSS를 사용하여 div의 배경 이미지 크기 조정

Question

다음 div에 배경 이미지가 있습니다.

나는 창 크기 (모바일, 태블릿 등) 어떻게 가능에 따라이 로고 DIV의 크기를 조정하려면

#logo { 
    margin-top: 15px; 
    min-height: 75px; 
    min-width: 75px; 
    background: url(rotarywheel.png) no-repeat; 
    float: left; 
} 

? 도와주세요.

Answer 1

은 id를 가진 태그를 만들 때 다르게 표시 될 수 있도록 CSS ID 태그를 사용합니다.

Answer 2

체크 아웃 background-size

배경 크기의 CSS 속성은 배경 이미지의 크기를 지정합니다. 이미지의 크기는 고유 한 비율을 유지하기 위해 완전히 제한되거나 부분적으로 만 사용될 수 있습니다.

Answer 3

창 크기에 따라 원하는 것을 만들고 싶다면 media queries을보고 싶을 것입니다. 이것은 해당 페이지의 상단에있는 예에서 수정 :

<!-- CSS media query on a link element --> 
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> 

<!-- CSS media query within a style sheet --> 
<style> 
@media (max-width: 600px) { 
    #logo { 
     width: 500px; 
     height: 200px; 
     background-image: url('500-200-bg.png') no-repeat; 
    } 
} 
</style> 

Answer 4

사용 배경 크기 CSS 속성

예를 들면 비율의 배경 크기

background-size:100px 50px; 

Answer 5

사용 및 너비도. div의 너비와 높이의 비율이 같기 때문입니다.

#logo { 
margin-top: 15px; 
min-height:75px; 
min-width: 75px; /*value in percentage or em;*/ 
background: url(rotarywheel.png) no-repeat; 
background-size:25%; /*value in percentage or em;*/ 
float: left; 

}