티스토리 뷰

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
반응형

'Programming language > HTML & CSS' 카테고리의 다른 글

tooltip( 말풍선 ) CSS (1)  (0) 2018.07.12
FOUC 현상  (0) 2017.09.15
어도비 브라켓  (0) 2016.02.26
css 핵 정리  (0) 2014.08.26
svg 로 web icon(아이콘 폰트) 만들기~  (0) 2014.07.29
댓글