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