Skip to content

AngularJS component for a fixed aspect ratio image container.

License

Notifications You must be signed in to change notification settings

j-d-b/angular-fixed-aspect-img

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

AngularJS fixed-aspect-img Component

AngularJS component for a fixed aspect ratio image container.

This component can be used in responsive layouts where the image container size is variable (e.g. depends on display width).

Demonstration

Features

  • Fills the parent element, which can have dynamic width/height
  • Keeps a fixed aspect ratio, that can be set/changed dynamically
  • Holds an image, which is centered within the container, stretched to either full width or full height depending on the aspect ratio of the image and the container; if the image aspect ratio does not exactly match the container aspect ratio, black (or any user-set color) bars fill the remaining space on the top/bottom or left/right.

Usage

Installation

npm install angular-fixed-aspect-img

Include dependency

ES Module

import fixedAspectImg from 'fixed-aspect-img';

const app = angular.module('app', [fixedAspectImg]);

In <script>

Include node_modules/angular-fixed-aspect-img/dist/angular-fixed-aspect-img.umd.js in src attribute of <script> tag. Or, pull in the dependencies from a unpkg.

<script src="https://unpkg.com/angular-fixed-aspect-img/dist/angular-fixed-aspect-img.umd.js"></script>

Inject dependency into your app

const app = angular.module('app', ['fixedAspectImg']);

Using the component

<fixed-aspect-img
  aspect-ratio="'4:3'"
  img-src="my-image.jpg"
  bg-color="'red'"
></fixed-aspect-img>

Examples

See example/, which pulls in all dependencies through a CDN, so all you have to do it open example/example.html in your browser.

API

  • imageSrc: the image URL
  • aspectRatio optional: a string representing an aspect ratio using : notation (e.g. '4:3', '16:9'). Default: 4:3
  • bgColor optional: a string representing a CSS color value, used as the background of the image container (top or side bars). Default: black
  • altMsg optional: string to fill

Note: each binding is one-way component binding (<), thus if you are passing a string directly rather than a variable containing a string, you must enclose the string in quotes.

License

This package is licensed under The MIT License.

Todo

  • Add example
  • Enhanced README
  • Add minified library to dist/
  • Written tests

About

AngularJS component for a fixed aspect ratio image container.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published