CSS | 주 내용에 이미지를 맞출 수 없습니다.

Question

15 % 높이의 머리글과 바닥 글을 만들고 싶었고 나머지 높이는 주 이미지 (이미지 포함) 여야했습니다. 그러나 불행히도 이미지가 너무 커지고 크기를 100 % 너비 (#all div) 및 70 % (#all div)로 조정하는 방법을 알지 못합니다.

도움을 주시면 감사하겠습니다.

image 현재의 모습입니다.

html, 
body { 
    margin:0; 
    padding:0; 
    height:100%; 
    width: 100%; 
} 

#all { 
    position:relative; 
    width: 60%; 
    height:100%; 
    margin: auto; 
} 

header#main-header{ 
    display: block; 
    position: absolute; 
    background:#ff0; 
    height: 15%; 
    width: 100%; 
    z-index: 10; 
} 

#main { 
    display: block; 
    position: absolute; 
    top: 15%; 
    height: 30%; 
} 

footer{ 
    display: block; 
    position:absolute; 
    bottom:0; 
    width:100%; 
    height:15%; /* Height of the footer */ 
    background:#6cf; 
    z-index: 10; 
} 

Answer 1

시도는 또한 #main img {display:block; width:100% } 사용, 난 당신이 클래스 대신 ID를 사용하는 것이 좋습니다.