슬라이드이미지 모바일에서는 이미지확대
본문
반응형 메인 슬라이드 이미지를 모바일에서 보면 높이가 너무 낮아져서 모바일에서는 조금 확대되게 세팅할려는데요
@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 버전으로 따로 운용하고있습니다..
답변 너무 감사드립니다 딱 제가 원하는 답변입니다.
알려주신 다른 대안으로 모바일 pc 사이즈 따로 슬라이드 이미지 작업했습니다
감사드립니다