슬라이드이미지 모바일에서는 이미지확대 채택완료
반응형 메인 슬라이드 이미지를 모바일에서 보면 높이가 너무 낮아져서 모바일에서는 조금 확대되게 세팅할려는데요
@media (max-width: 639px){ .lt_bn li img{max-width:1000px;width:170%;height:170%;vertical-align:top}
이렇게 하니깐 모바일에서는 확대는 되는데 이미지가 센터를 기준으로 획대가 안되고 왼쪽 기준으로 확대가 되어 이미지가 오른쪽으로 치우칩니다.
그래서 수평기준으로 센터를 넣으면 될것같아 ;Horizontal-align:center 를 추가했는데 이 코드가 아닌것같은데 어떻게 수정하야할까요??
@media (max-width: 639px){ .lt_bn li img{max-width:1000px;width:170%;height:170%;vertical-align:top;Horizontal-align:center}
이렇게 하니 안되네요 ;;
답변 1개
보통 중앙기준으로 크고 작게 되는것은 HOVER시 transform:scale( ) 으로
이미지가 크고 작아짐을 이용하는데요
background 를 이용한것이 아니라 img 썸네일로 들어가면
당연히 오른쪽 기준으로 커지고 작아질수 밖에 없습니다.
mobile 게시판을 운영해서 mo_lt_bn 이라는 클래스명을 가졌다는 전제하에
@media (max-width: 639px){ .lt_bn{display:none;}
.mo_lt_bn{display:block} 로 따로 운용하시거나
직접 높이 너비를 계산해서
@media (max-width: 639px){ .lt_bn li img{max-width:1000px;width:170%;height:170%;vertical-align:top; transform:scale(1보다 아래수)}
작업하는게 빠르게 보이네요..
저도 반응형은 그런 문제 때문에 아에 모바일버전과 pc 버전으로 따로 운용하고있습니다..
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
알려주신 다른 대안으로 모바일 pc 사이즈 따로 슬라이드 이미지 작업했습니다
감사드립니다