여러 이미지의 크기를 비율에 맞게 조정하는 방법은 무엇입니까?

Question

여러 개의 이미지 레이어가있는 새로운 HTML5 페이지를 만들고 있습니다. 첫 번째 레이어는 전체 화면 이미지 인 배경 레이어입니다 (화면 크기에 비례 함).

두 번째 레이어는 첫 번째 레이어에 비례하는 고정 된 위치에 있어야하는 다른 이미지 개체입니다. 그래서 브라우저 크기를 변경하면 두 이미지 모두 크기가 바뀌므로 서로 비례합니다.

어떻게 할 수 있습니까?

Answer 1

그래서 "sky.jpg"배경 이미지와 그 위에 "sun.png"이미지가 있다고 가정 해 봅시다. 여기

는 HTML의 (5) 코드 :

#sky { 
    width:100%; /* width in percentage, so it will adapt to user's screen */ 
    height:600px; /* here i've set a fixed height, but maybe it's not what you want */ 
    background:url(sky.jpg) top center no-repeat; 
    text-align:center; /* #sun will be centered, not sure it's what you need */ 
    background-size:cover; 
    -moz-background-size:cover; 
} 
#sun { 
    width:15%; /* adjust it to the needed ratio */ 
    max-width:300px; /* max-width will prevent it from being bigger than the original image */ 
    min-width:20px; /* min-width is optional */ 
} 

Live demo (크기를 조절 창)

---

을 주목 background-size 특성 : 여기

<div id="sky"> 
<img src="sun.png" id="sun"> 
</div> 

그리고는 반응 CSS입니다 cover (more info here)으로 설정하십시오.

가로 세로 비율은 to the smallest size such that both its width and its height can completely cover the background positioning area으로 유지됩니다.

그런 이유로 대부분의 해상도보다 큰 이미지가 필요합니다 (신체 배경 이미지 인 경우).

다른 가능한 값은 "포함"및 "자동"(have a look at the specs)입니다.

background-size:cover; (우리는 여전히 배경 위치에 대한 top center를 추가 그 이유는) 일부 FF 버전의 당신이 (-moz-)

---

이제 번호 비율에 폭을 설정할 수 있습니다 공급 업체 접두사가 필요합니다 not supported by IE8입니다 태양, 그래서 그것의 div 포함 비율을 유지합니다. 원본 크기보다 커지지 않도록 max-width (그리고 결국 min-width)으로 설정할 수 있습니다.

현대적인 브라우저에서는 이미지 높이가 자동으로 조정됩니다.

---

#sky에서 고정 높이를 사용하지 않으려면 해당 컨테이너의 높이가 auto (기본값)와 다른지 확인하십시오. #sky이 페이지의 배경 이미지 인 경우

예를 들어, 설정했습니다 :

html, body { height:100%; } 
#sky { height:100%; }