유용한팁
    글보기
    제목갤러리,웹진 이미지 불러오는 방식 설정하기2016-09-20 20:10:30
    작성자

    갤러리,웹진 이미지 불러오는 방식 설정하기 =



    1. 이미지를 불러오는 기본 타입: img

     - 이미지 사이즈 비율에 상관없이 고정 크기로 설정해서 불러옴

     - 모델링 코드
      {"field":"fn_image_path","name":"이미지","width":"100%","height":"90px","type":"img" ...

     - 생성되는 HTML 코드
      <img style="width:100%;height:90px;" src="image.jpg">


    2. 이미지를 세로 크기에 맞춰서 가로 크기 비율을 설정: img_ratio
     - 이미지를 비율에 맞게 불러오는 방식으로 이미지 비율에 따라 크기가 달라짐

     - 모델링 코드
      {"field":"fn_image_path","name":"이미지","width":"100%","height":"90px","type":"img_ratio" ...

     - 생성되는 HTML 코드
      <img style="max-width:100%;height:90px;" src="image.jpg">


    3. 배경 속성을 이용하여 이미지 크기 및 비율 설정 : img_bg
     - "background-image" 속성을 이용하여 이미지를 배경 형태로 불러오는 방식

     - 모델링 코드
      {"field":"fn_image_path","name":"이미지","width":"100%","height":"90px","type":"img_bg" ...
       => "background-size":"cover","background-position":"center center" 속성 사용 가능 
          ("background-size":"cover" 속성은 IE8 이하 버젼에서 지원하지 않습니다)

     - 생성되는 HTML 코드
      <div style="width:100%;height:90px;background-image:url(image.jpg);background-position:center center;background-size:cover;"></div>


    4. 이미지 사이즈 속성 설정하기
     - 용량이 큰 이미지를 사용하는 갤러리의 로딩속도를 개선하기 위한 목적으로 망보드에서는 관리자>옵션설정에서
      Small 이미지와 Middle 이미지 사이즈를 설정하여 원본이미지의 복사본을 생성해서 사용할 수 있는 기능을 지원합니다.

     - 모델링 코드
      {"field":"fn_image_path","name":"이미지","width":"100%","height":"90px","type":"img_bg","size":"small" ...
       => small 사이즈로 생성된 이미지를 불러옵니다 (이미지가 없을 경우 원본 이미지를 불러옵니다)

      {"field":"fn_image_path","name":"이미지","width":"100%","height":"90px","type":"img_bg","size":"middle" ...
       => middle 사이즈로 생성된 이미지를 불러옵니다 (이미지가 없을 경우 원본 이미지를 불러옵니다)




     
    댓글

    (자동등록방지 숫자를 입력해 주세요)

    최근 본 상품

    등록된 게시물이 없습니다

    장바구니

    등록된 상품이 없습니다
    합계: 0