# imagecenterd

> jQuery plugin to center images of variable width and height (any variation of aspect ratios) horizontally and vertically in a div.

Latest version **1.6.0** (published 2016-05-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install imagecenterd
pnpm add imagecenterd
yarn add imagecenterd
bun add imagecenterd
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.6.0 |
| Published | 2016-05-24 |
| First published | 2015-10-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Jeannie Stevenson |
| Maintainers | jeannie |
| Keywords | center, images, jquery, jquery-plugin, ecosystem:jquery |

## Links

- npm: https://www.npmjs.com/package/imagecenterd
- Repository: https://github.com/JSDesign/imageCenterd
- Issues: https://github.com/JSDesign/imageCenterd/issues
- npm.io page: https://npm.io/package/imagecenterd

## Alternatives

- [gamedig](https://npm.io/package/gamedig.md) — 29.3K weekly downloads
- [join-monster](https://npm.io/package/join-monster.md) — 12.8K weekly downloads
- [masked](https://npm.io/package/masked.md) — 5.5K weekly downloads
- [@comunica/actor-query-process-explain-logical](https://npm.io/package/@comunica/actor-query-process-explain-logical.md) — 4.7K weekly downloads
- [@veracity/vui](https://npm.io/package/@veracity/vui.md) — 4.6K weekly downloads

## Recent versions

- 1.6.0 (latest) — 2016-05-24
- 1.5.0 — 2015-10-28

## README

# imageCenterd

**A jQuery Plugin**

Center images of variable width and height (any variation of aspect ratios) **horizontally** and **vertically** in a div.

## Usage

Center images of varying sizes vertically and horizontally inside a box.

**[Demo](http://jsdesign.me/projects/imagecenterd/)**

You can set the height of the box in the plugin options (default is `240px`). The plugin measures the width of the box and does math to set the size of the image. This way, the box can have a flexible width.

You also need to specify a class for the images inside the box. The plugin by default targets `.thumb` but you can set it to whatever you need to in the options.

**HTML**

````html
<div class="image-box">
	<img src="images/someimage.jpg" alt="this image" class="thumb">
</div>
````

**Include Scripts**

````html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/imagecenterd.js"></script>
````

**Call Function Without Options** (be sure to use the default `.thumb` class on your images)

````javascript
$( ".image-box" ).imageCenterd();
````

**Or Call Function With Options** (`boxHeight` and `imgClass` are the only options)

````javascript
$( ".image-box" ).imageCenterd({
	boxHeight: 260,
	imgClass: ".some-class"
});
````

### Fun Facts:

* Images must not be set to any max-width
* If image aspect ratio is less than one, it is a vertical image
* If image aspect ratio is greater than one, it is a horizontal image
* If image aspect ratio is less than box aspect ratio, it is more taller than wider than the box
* If image aspect ratio is greater than box aspect ratio, it is more wider than taller than the box

### Math:

NEW height = VARIABLE width * original height / original width

NEW width = VARIABLE height * original width / original height

### License
Licensed under the terms of the MIT license.

#### Notes

Built by Jeannie Stevenson using oxford commas, enthusiasm, and brains.

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