# aframe-src-fit-component

> src-fit texture-fitting component for A-Frame.

Latest version **0.1.1** (published 2017-02-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install aframe-src-fit-component
pnpm add aframe-src-fit-component
yarn add aframe-src-fit-component
bun add aframe-src-fit-component
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2017-02-21 |
| First published | 2016-12-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Michael Chen |
| Maintainers | machenmusik |
| Keywords | aframe, aframe-component, aframe-vr, vr, mozvr, webvr |

## Links

- npm: https://www.npmjs.com/package/aframe-src-fit-component
- Repository: https://github.com/chenzlabs/aframe-src-fit-component
- Homepage: https://github.com/chenzlabs/aframe-src-fit-component#readme
- Issues: https://github.com/chenzlabs/aframe-src-fit-component/issues
- npm.io page: https://npm.io/package/aframe-src-fit-component

## Recent versions

- 0.1.1 (latest) — 2017-02-21
- 0.1.0 — 2016-12-21

## README

## src-fit

src-fit component for [A-Frame](https://aframe.io).

---
title: src-fit
type: components
layout: docs
parent_section: components
---

The src-fit component automatically modifies the geometry of the entity
to match its material src (e.g. image or video) dimensions as specified, 
and emits an event signaling the changes in dimensions, if any.

If the entity has geometry width specified, 
the entity's height will be resized preserving aspect ratio.

If the entity has only geometry height specified, 
the entity's width will be resized preserving aspect ratio.

If the entity has neither geometry width or height specified, 
the entity will be resized preserving aspect ratio within a maximum 1x1 size.

Thanks to @nylki for inspiration with different implementation at
https://github.com/nylki/aframe-fit-texture-component
and the great Slack discussion resulting in this separate component.

## Example

```html
<a-image src="foo.png" src-fit></a-image>
```

## Events

| Event Name   | Description             |
| ----------   | -----------             |
| fit          | Fit was performed.      |

### Installation

#### Browser

Install and use by directly including the [browser files](dist):

```html
<head>
  <title>My A-Frame Scene</title>
  <script src="https://aframe.io/releases/0.4.0/aframe.min.js"></script>
  <script src="https://rawgit.com/chenzlabs/aframe-src-fit-component/master/dist/aframe-src-fit-component.min.js"></script>
</head>

<body>
  <a-scene>
    <a-image src="..." src-fit></a-image>
  </a-scene>
</body>
```

#### npm

Install via npm:

```bash
npm install aframe-src-fit-controls-component
```

Then register and use.

```js
require('aframe');
require('aframe-src-fit-component');
```

---
_Source: https://npm.io/package/aframe-src-fit-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
