CSS 100%로 채우기

CSS 100%로 채우기

 

 

화면에 100%로 채우기 css

.target{
max-width:none;
max-height: 100%;
min-width: 100%;
min-height: 100%;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translateX(-50%) translateY(-50%);

/* 만약에 다른곳에서 상속되어 width/height가 설정된다면 아래처럼 덮어씌우자.

width:auto;

height:auto;

*/
}

/*16:9의 비율로 와이드 화면이 된다면 아래처럼 미디어쿼리로 값변경*/

@media (min-aspect-ratio: 16/9){

.target{max-height: none; max-width: 100%;}

}