현재 위치
  1. 게시판
  2. 유용한 웹 팁

유용한 웹 팁

쇼핑몰 운영에 도움이 되는 정보들입니다.

게시판 상세
제목 모바일 상품상세 이미지 사이즈 조절하기
작성자 별모아디자인 (ip:)
  • 평점 0점  
  • 작성일 2020-01-06
  • 추천 추천하기
  • 조회수 74


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


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


모바일 디자인의  <!--@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

비밀번호 : 확인 취소

댓글 입력
댓글달기 이름 : 비밀번호 : 관리자답변보기

영문 대소문자/숫자/특수문자 중 2가지 이상 조합, 10자~16자

/ byte

왼쪽의 문자를 공백없이 입력하세요.(대소문자구분)

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