# rwd-img()

## 용도 <a href="#use" id="use"></a>

`<img />` 요소를 포함하는 컨테이너 크기에 반응하도록 할 때 사용합니다.

## 사용법 <a href="#usage" id="usage"></a>

`rwd-img()` 믹스인에 이미지 원래 크기 제한 여부, 반응하는 속성 값을 전달합니다.

> rwd-img($limit-origin-size:**bool**, $ratio-prop:**string**)

```ruby
.usage {
  @include rwd-img();
}
```

|   매개변수(parameter)  | 유형(type) | 필수(required) | 기본 값(default) |
| :----------------: | :------: | :----------: | :-----------: |
| $limit-origin-size |   bool   |              |     `true`    |
|     $ratio-prop    |  string  |              |    `width`    |

위 예시 코드는 아래의 CSS로 컴파일 되어 출력됩니다.

```css
.usage {
  max-width: 100%;
  height: auto;
}
```

#### 콘테이너 높이에 반응하는 이미지 설정

믹스인 비율 속성(`$ratio-prop`) 값으로 `height`를 전달합니다.

```css
.usage {
  @include rwd-img($ratio-prop: height);
}
```

위 예시 코드는 아래의 CSS로 컴파일 되어 출력됩니다.

```css
.usage {
  height: 100%;
  width: auto;
}
```

## 로직 <a href="#logic" id="logic"></a>

`rwd-img()` 믹스인은 다음의 로직에 의해 작성되었습니다.&#x20;

```javascript
@mixin rwd-img($limit-origin-size: true, $ratio-prop: width) {
  $prop: if($limit-origin-size, max-#{$ratio-prop}, #{$ratio-prop});
  $cross-prop: if($ratio-prop == 'width', 'height', 'width');
  #{$prop}: 100%;
  #{$cross-prop}: auto;
}
```

1. 전달 받은 인자가 없을 경우, 기본 설정된 매개변수 값을 사용
2. 원래 크기 제한 설정 값이 `true` 인 경우, 속성 이름 앞에 `max-` 접두사 추가
3. 전달 받은 비율 속성과 반대되는 속성 조건 처리 (예: `width`의 반대 속성 → `height`)
4. 조건 처리 된 각 속성 설정

## 참고 <a href="#reference" id="reference"></a>

믹스인에 사용된 Sass의 빌트인 모듈은 다음과 같습니다.

* [@mixin / @include](https://sass-lang.com/documentation/at-rules/mixin)
* [@if / @else](https://sass-lang.com/documentation/at-rules/control/if)
* [if()](https://sass-lang.com/documentation/modules#if)