# pintuer

**Repository Path**: jeay/pintuer

## Basic Information

- **Project Name**: pintuer
- **Description**: 空的拼图框架，方便开始
- **Primary Language**: HTML/CSS
- **License**: GPL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2017-10-19
- **Last Updated**: 2021-11-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# pintuer

空的拼图框架，方便开始

使用方法： `fork` 再`git clone`下来  

## 基本目录结构

_blank.html 从这里开始  
/sass/ 用于存放SASS文件  
/css/ 用于存放生成的CSS文件  
/js/ 用于存放JS文件  
/font/ 使用了fontawesome图标字体，[查看图标](http://fontawesome.io/icons/)，原类名`fa fa-`被换成了`icon icon-`  
/img/ 存放图片  
/tmp/ 存放临时文件，如示例图片等  

## 响应式图片加载
  
### 使用方法：

1. 在img标签中**不要**直接使用src属性指定图片位置；  
2. 给img 加上类 “res”  
```html
<img class="res">
```
3. 添加不同尺寸图片的路径，形式为data-*="..."目前可用的有四种尺寸，注意使用匹配的图片大小：  

|属性|图片尺寸
|:------------:|:---------------:
|data-xl    | 760px
|data-xs    | 1000px
|data-xm    | 1200px
|data-xb    | 设计的最大尺寸

#### 最终的形式如
```html
<img class="res" 
data-xl="./img/banner-760p.jpg" 
data-xs="./img/banner-1000p.jpg" 
data-xm="./img/banner-1200p.jpg" 
data-xb="./img/banner-1920p.jpg">
```

## 100%宽度的图片

经常会遇到需要宽度100%的图片，使用类`img-res`

```html
<img class="img-res">
```

## 鼠标指向后图片变大效果

```html

<div class="img-scale">
    <img ...>
</div>
```

>将使用js为 .img-scale 添加img的宽高

如果需要圆形：
```css
.img-scale{border-radius:50%}
```