화면 비율 전체 화면 이미지

Question

전체 화면 (HTML 또는 자바 스크립트)을 채우지 만 이미지가 늘어나거나 왜곡되지 않고 전체 화면 비율을 유지하는 방법은 무엇입니까?

가 중앙에 오도록하고 어느 것 :

100 % 높이의 X %의 폭을 가질

또는

는 Y %의 유무 (여기서 "X"는 100 % 이하이다) 높이 및 너비 100 % (여기서 "y"는 100 % 이하 임)

전체 화면 이미지 뷰어 웹 앱과 같은 것.

Answer 1

사용이 :

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

img { 
max-width: 100%; 
max-height: 100%; 
} 

JSFIDDLE HERE

Answer 2

너비 또는 높이 중 하나만 설정하면 다른 이미지 비율에 따라 자동으로 설정됩니다.

Answer 3

html { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.container { 
 
    max-width: 100%; 
 
} 
 
.img-class { 
 
    max-width: 100%; 
 
    height: auto; 
 
    position: relative; 
 
}

당신은 컨테이너 사업부를 설정할 수는 정확히 필요한 경우, 절대 위치를 사용하여 화면에 위치합니다.