디스플레이 이미지를 전체 크기 CSS

Question

은 내 블로그 전체 크기 이미지를 표시하려고 : http://i.imgur.com/BruV8Hk.jpg가 잘립니다 도착하지만

... 난 이유를 알고하지 않습니다. .header 경계를 다시 검사 해 보았습니다. 이미지의 크기를 제한 할 부분을 볼 수 없습니다. 여기

는 사이트에 대한 codepen됩니다 : http://codepen.io/anon/pen/grLED이

도와주세요

편집 :

그냥 .. 내가 전체에서 해당 이미지를 수용 할만큼 큰 것으로 내 .header 컨테이너를 싶습니다 명확히

편집 2 : D를 얻을 수 http://codepen.io/anon/pen/vJyFn : 그래서

난 단지 이런 짓을 그 결과가 ... <br>없이 끝날 수 있습니까?

Answer 1

이 속성을 .header 클래스에 추가하십시오. 그러나 오래된 브라우저에서 작동하는지 확실하지 않습니다.

당신의 높이가 이미지 높이 후 작은 경우

background-repeat: no-repeat; 
background-position: center center; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 

업데이트, 당신은 치수 비율을 잃어 버리게된다. 이 경우 이미지가 늘어납니다. 여기에 설명 된대로 background-size: 300px 150px;과 같이 너비와 높이를 정의 할 수 있습니다.

또한 background-size 속성과 함께 cover 및 contain 옵션을 사용할 수 있습니다. 컨테이너 높이가 이미지보다 작 으면이 옵션을 사용해야합니다. 그렇지 않으면 너비 높이 배경 이미지를 설정하십시오.

자세한 내용은 link을 참조하십시오.

Answer 2

배경 크기를 설정해보십시오.

/* Always cover the container (not a lot of support) */ 
background-size: cover; 

또는

/* Fit width */ 
background-size: 100% auto; 

또는 당신은 절대적으로 당신이 높이에 맞게 '포함'또는 '자동 100 %'로 설정 할 수 자르기와 DIV 내부를 원하는 경우.

희망이 있습니다. :)

Answer 3

이 링크에 표시 할 이미지가 필요합니까?당신이 Link를 살펴 위해

http://codepen.io/anon/pen/grLED

body{ 
color: #202020; /*#3d3636 #fffaf0; #fdfdfd 8c8c8c*/ 
font-size:100%; 
font-family: 'Maven Pro', sans-serif; 
line-height:1.4em; 
min-height:100%; 
/*padding-left: 5%;*/ 
background: url('http://i.imgur.com/BruV8Hk.jpg'); 
    background-repeat:no-repeat; 
} 

Answer 4

나는 그것이라는 CSS3 속성이 있습니다

을 당신을 도울 수있는 작은 예를했습니다

background-size:cover; 

그 마법을 할 것입니다 :)

더 많은 정보 ATION는 여기에서 찾을 수 있습니다 : http://www.w3schools.com/cssref/css3_pr_background-size.asp

Answer 5

.responsive { 
    max-width: 100%; 
    height: auto; 
}