diff --git a/webapp/js/directives/responsive-ratio.html b/webapp/js/directives/responsive-ratio.html
new file mode 100644
index 0000000..49d37e3
--- /dev/null
+++ b/webapp/js/directives/responsive-ratio.html
@@ -0,0 +1,5 @@
+<div style="position:relative;padding-bottom:{{paddingRatio()}}%;">
+  <div style="position:absolute;top:0;bottom:0;left:0;right:0;overflow:hidden;">
+    <ng-transclude></ng-transclude>
+  </div>
+</div>
diff --git a/webapp/js/directives/responsive-ratio.js b/webapp/js/directives/responsive-ratio.js
new file mode 100644
index 0000000..882d8d2
--- /dev/null
+++ b/webapp/js/directives/responsive-ratio.js
@@ -0,0 +1,22 @@
+var responsiveRatio = angular.module('satbd.satellite.bar.directives.responsive-ratio',[]);
+
+
+responsiveRatio.directive('responsiveRatio', function() {
+    return {
+        scope: {
+            responsiveRatio: '<responsiveRatio'
+        },
+        templateUrl: 'js/directives/responsive-ratio.html',
+        restrict: 'A',
+        transclude:  true,
+        controller: 'ResponsiveRatioCtrl'
+    };
+});
+
+
+responsiveRatio.controller('ResponsiveRatioCtrl', function($scope) {
+    $scope.responsiveRatio = 1;
+    $scope.paddingRatio = function() {
+        return 1 / $scope.responsiveRatio * 100;
+    };
+});
diff --git a/webapp/js/views/series/series.js b/webapp/js/views/series/series.js
index b98bee4..6682a77 100644
--- a/webapp/js/views/series/series.js
+++ b/webapp/js/views/series/series.js
@@ -1,7 +1,8 @@
 'use strict';
 
 angular.module('satbd.satellite.bar.views.series',[
-	'ngRoute'
+	'ngRoute',
+    'satbd.satellite.bar.directives.responsive-ratio'
 ]).config(function($routeProvider) {
 	$routeProvider.when('/series', {
 		templateUrl: 'js/views/series/series.html'