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 사이즈로 생성된 이미지를 불러옵니다 (이미지가 없을 경우 원본 이미지를 불러옵니다)
|
Hometory
