화면 크기에 관계없이 웹 사이트에 이미지 배경이 100 % 표시됨

Question

나는이 질문 제목을 제대로 구성하지 않았지만 다음과 같이 대답하려고합니다. Key : image = 양식

문제 1 : 배경 이미지가 페이지의 너비에 관계없이 완벽한 크기로 유지되도록하십시오. 동영상 이미지의 전체 프레임을 표시합니다. 이미지가 완벽한 너비 (http://gyazo.com/702e443a6b814b1abc26a801836f4d6f)이면 이미지 전체가 표시됩니다. 너비를 더 늘리면 이미지가 '확대'됩니다. (내가 원하지 않는)

문제 2 : 화면 크기가 훨씬 작은 휴대 장치에서는 대부분의 이미지가 잘리고 나머지는 스크롤 할 수 없습니다. 동영상 이미지의 전체 프레임을 표시합니다. 이미지 전체를 중앙에 배치하고 사용자가 이미지의 전체 프레임을 볼 수 있어야합니다.

이 내 코드는 이미지의 모습입니다 :

당신은 '반응 형 웹 디자인 "이라고 말하려고 무엇

background-image: url("https://s-media-cache-ak0.pinimg.com/originals/a4/79/4c/a4794cbfe048505d9645339738a8ddc7.jpg"); 
    height: 60%; 
    background-size: 100%; 
    background-repeat: no-repeat; 
    background-size: cover; 

jsfiddle

Answer 1

당신은 다음을 수행해야합니다

#top{ 
    background-image: url("https://s-media-cache-ak0.pinimg.com/originals/a4/79/4c/a4794cbfe048505d9645339738a8ddc7.jpg"); 
    height: 60%; 
    background-position: center -150px; 
    background-repeat: no-repeat; 
} 

당신이 background-size: 100%;을 사용하고 있기 때문에 당신이 당신을 위해 이미지 크기를 조정하는 브라우저를 말하는 것입니다. 이를 제거하고 배경을 배치하면 크기를 조정하지 않고 원하는 이미지를 얻을 수 있습니다.

Fiddle

참고 : 당신은 당신의 이미지의 크기가 충분한 지 확인해야합니다 페이지가 당신이 배경을 볼 수 없습니다 정말 큰 기지개 될 때. 화면 해상도가 너무 커지면 어렵습니다.

Answer 2

#your_image_container_id { 
    width: 100%; 
} 

. RWD를 달성하려면 픽셀, 점 등과 같은 절대 단위를 사용하지 말고 %, em과 같은 상대 단위를 사용하고 화면의 크기에 따라 비례합니다. 그러나 %과 같은 계산을 한 경우 동일한 행의 모든 ​​요소가 100 % 이상의 백분율로 채워지는지 확인하고 패딩과 여백을 보완해야합니다.