Programming language/HTML & CSS

화면에 width/height 100%로 채우기 css

hello-world 2017. 8. 11. 12:56
728x90
반응형

화면에 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%;}

}


728x90
반응형