css 해상도관련 문의드립니다. 채택완료
배경이미지가 아닌 div에 이미지가 있습니다.
-----------------------------
#subbanner img{ max-width: 100%; float: left; width: 100%; -webkit-transition-property: width; -webkit-transition-duration: .3s; position: relative; left:0px; top:0px; z-index: 1; }
#subbanner .subtitle { font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; text-align:right; color:#fff; width: 100%; right: 30px; top: 95px; position:absolute; z-index:5; }
예를들어 이런 구조라고 했을때 현재 해상도에 따라서 이미지가 줄어들고
늘어나고 합니다.
1. 제가 하고싶은건 해상도가 일정크기로 줄어들었을때 이미지가 더이상
줄어들지 않게 하고싶습니다~
2. subtitle에 들어가는 텍스트가 해상도와 상관없이 일정위치에서 고정되고
해상도가 줄어들었을때는 텍스트크기가 같이 줄어들게 하고싶습니다.
어떻게 수정해주면 될까요?
답변 1개
반응형을 사용하셔야 할 것 같네요.
@media 속성과 min-width, max-width 등 속성을 이용해 해상도 크기를 지정 후,
이미지에 대해서 min-width 설정해주시면 될 것 같네요.
해상도에 상관없는 부분은 @media 속성과 min-width, max-width 밖에 정의하고,
해상도에 따라 변하는 부분만 위 코드 안에서 정의해주시면 됩니다.
자세한 사용법은, 해당 키워드로 구글링 ^^
답변에 대한 댓글 2개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
고맙습니다//