유용한 웹 팁

뒤로가기
제목

모바일 상품상세 이미지 사이즈 조절하기

작성자 별모아디자인(ip:)

작성일 2020-01-06

조회 151

평점 0점  

추천 추천하기

내용


상품등록하실 때 상품상세이미지를 픽셀 고정 값을 지정하여 올릴 경우
모바일 쇼핑몰에서 확인해보면
이미지가 모바일 화면에 자동으로 리사이징 되지않고
픽셀값 크기 그대로 화면을 벗어난채 크게 보여집니다.


이렇게 픽셀값으로 고정하여 올린 상품상세이미지를
강제로 모바일에서 자동 리사이징되어 보여지도록 하려면
아래 소스를 추가해주어야 합니다.


모바일 디자인의  <!--@css(/css/module/product/additional.css)--> 파일에 들어가서

14행에 보면 .xans-product-additional #prdDetail img { width:100%; margin:0; }
이와 같은 소스가 있는데 max-width:100%; height: auto !important; 를 더 추가하여서
아래 소스처럼 수정해주시면 됩니다.


.xans-product-additional #prdDetail img { width:100%; max-width:100%; height: auto !important; margin:0; }


-------------------------------------------------------------------------------


상품상세페이지에 html 을 이용해 표(table)를 삽입했을 경우

테이블의 고정 픽셀값때문에 모바일에서 확인해보면

표가 모바일 화면에 자동 리사이징되지않고 화면밖으로 잘려서 보이게 됩니다.


모바일 디자인의  <!--@css(/css/module/product/additional.css)--> 파일에 들어가서

아래 소스 전부 복사하여 추가해주면 됩니다.


.xans-product-additional #prdDetail table { width: 100% !important; max-width:100% !important; height: auto !important; margin:0; }





첨부파일

비밀번호
수정

비밀번호 입력후 수정 혹은 삭제해주세요.

댓글목록

등록된 댓글이 없습니다.

댓글 수정

이름

비밀번호

내용

/ byte

수정 취소

비밀번호

확인 취소

댓글 입력

이름

비밀번호

내용

/ byte

평점

관리자에게만 댓글 작성 권한이 있습니다.