diff --git a/dist/vue-aspect-ratio.common.js b/dist/vue-aspect-ratio.common.js
index 66af2c5..fc85465 100644
--- a/dist/vue-aspect-ratio.common.js
+++ b/dist/vue-aspect-ratio.common.js
@@ -1,5 +1,5 @@
 /*!
- * vue-aspect-ratio v0.1.0 
+ * vue-aspect-ratio v0.1.1 
  * (c) 2019 albertodeagostini.dev@gmail.com
  * Released under the MIT License.
  */
@@ -60,6 +60,12 @@ function _nonIterableRest() {
 var script = {
   name: "VueAspectRatio",
   props: {
+    /**
+     * Aspect Ratio.
+     * String with the following pattern
+     * <aspect_ratio_width>:<aspect_ratio_height>
+     * Default is "1:1" meaning that the component will be a square
+     */
     ar: {
       type: String,
       default: "1:1",
@@ -73,7 +79,13 @@ var script = {
 
         return !Number.isNaN(w) && !Number.isNaN(h);
       }
-    }
+    },
+
+    /**
+     * Width to set to the component.
+     * Optional, if not set the width will be 100% like a normal "div" element
+     */
+    width: String
   },
   data: function data() {
     return {
@@ -84,15 +96,27 @@ var script = {
     };
   },
   computed: {
+    /**
+     * Style for the outer div element, this can just set the width of the component itself
+     */
+    componentStyle: function componentStyle() {
+      return this.width ? {
+        width: this.width
+      } : {};
+    },
+
+    /**
+     * Style for the inner div element, this will define the aspect ratio
+     */
     innerStyle: function innerStyle() {
-      // set the padding, this is actually what gives the aspect ratio
+      // set the padding top, this is actually what gives the aspect ratio
       return {
         paddingTop: this.h / this.w * 100 + "%"
       };
     }
   },
   created: function created() {
-    // set w and h data
+    // set w and h data parsing the ar prop
     var _this$ar$split$map = this.ar.split(":").map(function (v) {
       return parseInt(v);
     }),
@@ -246,17 +270,17 @@ var browser = createInjector;
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"vue-aspect-ratio"},[_c('div',{staticClass:"vue-aspect-ratio__inner",style:(_vm.innerStyle)},[_c('div',{staticClass:"vue-aspect-ratio__content"},[_vm._t("default")],2)])])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"vue-aspect-ratio",style:(_vm.componentStyle)},[_c('div',{staticClass:"vue-aspect-ratio__inner",style:(_vm.innerStyle)},[_c('div',{staticClass:"vue-aspect-ratio__content"},[_vm._t("default")],2)])])};
 var __vue_staticRenderFns__ = [];
 
   /* style */
   const __vue_inject_styles__ = function (inject) {
     if (!inject) return
-    inject("data-v-69342252_0", { source: ".vue-aspect-ratio__inner[data-v-69342252]{position:relative}.vue-aspect-ratio__content[data-v-69342252]{position:absolute;top:0;left:0;width:100%;height:100%}", map: undefined, media: undefined });
+    inject("data-v-f0460d78_0", { source: ".vue-aspect-ratio__inner[data-v-f0460d78]{position:relative}.vue-aspect-ratio__content[data-v-f0460d78]{position:absolute;top:0;left:0;width:100%;height:100%}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__ = "data-v-69342252";
+  const __vue_scope_id__ = "data-v-f0460d78";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */
diff --git a/dist/vue-aspect-ratio.esm.js b/dist/vue-aspect-ratio.esm.js
index 628c68b..82d75ba 100644
--- a/dist/vue-aspect-ratio.esm.js
+++ b/dist/vue-aspect-ratio.esm.js
@@ -1,5 +1,5 @@
 /*!
- * vue-aspect-ratio v0.1.0 
+ * vue-aspect-ratio v0.1.1 
  * (c) 2019 albertodeagostini.dev@gmail.com
  * Released under the MIT License.
  */
@@ -58,6 +58,12 @@ function _nonIterableRest() {
 var script = {
   name: "VueAspectRatio",
   props: {
+    /**
+     * Aspect Ratio.
+     * String with the following pattern
+     * <aspect_ratio_width>:<aspect_ratio_height>
+     * Default is "1:1" meaning that the component will be a square
+     */
     ar: {
       type: String,
       default: "1:1",
@@ -71,7 +77,13 @@ var script = {
 
         return !Number.isNaN(w) && !Number.isNaN(h);
       }
-    }
+    },
+
+    /**
+     * Width to set to the component.
+     * Optional, if not set the width will be 100% like a normal "div" element
+     */
+    width: String
   },
   data: function data() {
     return {
@@ -82,15 +94,27 @@ var script = {
     };
   },
   computed: {
+    /**
+     * Style for the outer div element, this can just set the width of the component itself
+     */
+    componentStyle: function componentStyle() {
+      return this.width ? {
+        width: this.width
+      } : {};
+    },
+
+    /**
+     * Style for the inner div element, this will define the aspect ratio
+     */
     innerStyle: function innerStyle() {
-      // set the padding, this is actually what gives the aspect ratio
+      // set the padding top, this is actually what gives the aspect ratio
       return {
         paddingTop: this.h / this.w * 100 + "%"
       };
     }
   },
   created: function created() {
-    // set w and h data
+    // set w and h data parsing the ar prop
     var _this$ar$split$map = this.ar.split(":").map(function (v) {
       return parseInt(v);
     }),
@@ -244,17 +268,17 @@ var browser = createInjector;
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"vue-aspect-ratio"},[_c('div',{staticClass:"vue-aspect-ratio__inner",style:(_vm.innerStyle)},[_c('div',{staticClass:"vue-aspect-ratio__content"},[_vm._t("default")],2)])])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"vue-aspect-ratio",style:(_vm.componentStyle)},[_c('div',{staticClass:"vue-aspect-ratio__inner",style:(_vm.innerStyle)},[_c('div',{staticClass:"vue-aspect-ratio__content"},[_vm._t("default")],2)])])};
 var __vue_staticRenderFns__ = [];
 
   /* style */
   const __vue_inject_styles__ = function (inject) {
     if (!inject) return
-    inject("data-v-69342252_0", { source: ".vue-aspect-ratio__inner[data-v-69342252]{position:relative}.vue-aspect-ratio__content[data-v-69342252]{position:absolute;top:0;left:0;width:100%;height:100%}", map: undefined, media: undefined });
+    inject("data-v-f0460d78_0", { source: ".vue-aspect-ratio__inner[data-v-f0460d78]{position:relative}.vue-aspect-ratio__content[data-v-f0460d78]{position:absolute;top:0;left:0;width:100%;height:100%}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__ = "data-v-69342252";
+  const __vue_scope_id__ = "data-v-f0460d78";
   /* module identifier */
   const __vue_module_identifier__ = undefined;
   /* functional template */
diff --git a/dist/vue-aspect-ratio.umd.js b/dist/vue-aspect-ratio.umd.js
index de5f270..ce44781 100644
--- a/dist/vue-aspect-ratio.umd.js
+++ b/dist/vue-aspect-ratio.umd.js
@@ -1,5 +1,5 @@
 /*!
- * vue-aspect-ratio v0.1.0 
+ * vue-aspect-ratio v0.1.1 
  * (c) 2019 albertodeagostini.dev@gmail.com
  * Released under the MIT License.
  */
@@ -64,6 +64,12 @@
   var script = {
     name: "VueAspectRatio",
     props: {
+      /**
+       * Aspect Ratio.
+       * String with the following pattern
+       * <aspect_ratio_width>:<aspect_ratio_height>
+       * Default is "1:1" meaning that the component will be a square
+       */
       ar: {
         type: String,
         default: "1:1",
@@ -77,7 +83,13 @@
 
           return !Number.isNaN(w) && !Number.isNaN(h);
         }
-      }
+      },
+
+      /**
+       * Width to set to the component.
+       * Optional, if not set the width will be 100% like a normal "div" element
+       */
+      width: String
     },
     data: function data() {
       return {
@@ -88,15 +100,27 @@
       };
     },
     computed: {
+      /**
+       * Style for the outer div element, this can just set the width of the component itself
+       */
+      componentStyle: function componentStyle() {
+        return this.width ? {
+          width: this.width
+        } : {};
+      },
+
+      /**
+       * Style for the inner div element, this will define the aspect ratio
+       */
       innerStyle: function innerStyle() {
-        // set the padding, this is actually what gives the aspect ratio
+        // set the padding top, this is actually what gives the aspect ratio
         return {
           paddingTop: this.h / this.w * 100 + "%"
         };
       }
     },
     created: function created() {
-      // set w and h data
+      // set w and h data parsing the ar prop
       var _this$ar$split$map = this.ar.split(":").map(function (v) {
         return parseInt(v);
       }),
@@ -250,17 +274,17 @@
   const __vue_script__ = script;
 
   /* template */
-  var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"vue-aspect-ratio"},[_c('div',{staticClass:"vue-aspect-ratio__inner",style:(_vm.innerStyle)},[_c('div',{staticClass:"vue-aspect-ratio__content"},[_vm._t("default")],2)])])};
+  var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"vue-aspect-ratio",style:(_vm.componentStyle)},[_c('div',{staticClass:"vue-aspect-ratio__inner",style:(_vm.innerStyle)},[_c('div',{staticClass:"vue-aspect-ratio__content"},[_vm._t("default")],2)])])};
   var __vue_staticRenderFns__ = [];
 
     /* style */
     const __vue_inject_styles__ = function (inject) {
       if (!inject) return
-      inject("data-v-69342252_0", { source: ".vue-aspect-ratio__inner[data-v-69342252]{position:relative}.vue-aspect-ratio__content[data-v-69342252]{position:absolute;top:0;left:0;width:100%;height:100%}", map: undefined, media: undefined });
+      inject("data-v-f0460d78_0", { source: ".vue-aspect-ratio__inner[data-v-f0460d78]{position:relative}.vue-aspect-ratio__content[data-v-f0460d78]{position:absolute;top:0;left:0;width:100%;height:100%}", map: undefined, media: undefined });
 
     };
     /* scoped */
-    const __vue_scope_id__ = "data-v-69342252";
+    const __vue_scope_id__ = "data-v-f0460d78";
     /* module identifier */
     const __vue_module_identifier__ = undefined;
     /* functional template */
diff --git a/dist/vue-aspect-ratio.umd.min.js b/dist/vue-aspect-ratio.umd.min.js
index 6dc89b0..6cb6ff7 100644
--- a/dist/vue-aspect-ratio.umd.min.js
+++ b/dist/vue-aspect-ratio.umd.min.js
@@ -1,6 +1,6 @@
 /*!
- * vue-aspect-ratio v0.1.0 
+ * vue-aspect-ratio v0.1.1 
  * (c) 2019 albertodeagostini.dev@gmail.com
  * Released under the MIT License.
  */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self,e.VueAspectRatio=t())}(this,function(){"use strict";function e(e,i){return t(e)||n(e,i)||r()}function t(e){if(Array.isArray(e))return e}function n(e,t){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e)){var n=[],r=!0,i=!1,o=void 0;try{for(var a,s=e[Symbol.iterator]();!(r=(a=s.next()).done)&&(n.push(a.value),!t||n.length!==t);r=!0);}catch(e){i=!0,o=e}finally{try{r||null==s.return||s.return()}finally{if(i)throw o}}return n}}function r(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}function i(e,t,n,r,i,o,a,s,u,d){"boolean"!=typeof a&&(u=s,s=a,a=!1);var c="function"==typeof n?n.options:n;e&&e.render&&(c.render=e.render,c.staticRenderFns=e.staticRenderFns,c._compiled=!0,i&&(c.functional=!0)),r&&(c._scopeId=r);var l;if(o?(l=function(e){e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,e||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,u(e)),e&&e._registeredComponents&&e._registeredComponents.add(o)},c._ssrRegister=l):t&&(l=a?function(){t.call(this,d(this.$root.$options.shadowRoot))}:function(e){t.call(this,s(e))}),l)if(c.functional){var f=c.render;c.render=function(e,t){return l.call(t),f(e,t)}}else{var p=c.beforeCreate;c.beforeCreate=p?[].concat(p,l):[l]}return n}function o(e){return function(e,t){return a(e,t)}}function a(e,t){var n=d?t.media||"default":e,r=l[n]||(l[n]={ids:new Set,styles:[]});if(!r.ids.has(e)){r.ids.add(e);var i=t.source;if(t.map&&(i+="\n/*# sourceURL="+t.map.sources[0]+" */",i+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),r.element||(r.element=document.createElement("style"),r.element.type="text/css",t.media&&r.element.setAttribute("media",t.media),c.appendChild(r.element)),"styleSheet"in r.element)r.styles.push(i),r.element.styleSheet.cssText=r.styles.filter(Boolean).join("\n");else{var o=r.ids.size-1,a=document.createTextNode(i),s=r.element.childNodes;s[o]&&r.element.removeChild(s[o]),s.length?r.element.insertBefore(a,s[o]):r.element.appendChild(a)}}}var s={name:"VueAspectRatio",props:{ar:{type:String,default:"1:1",validator:function(t){var n=t.split(":").map(function(e){return parseInt(e)}),r=e(n,2),i=r[0],o=r[1];return!Number.isNaN(i)&&!Number.isNaN(o)}}},data:function(){return{w:null,h:null}},computed:{innerStyle:function(){return{paddingTop:this.h/this.w*100+"%"}}},created:function(){var t=this.ar.split(":").map(function(e){return parseInt(e)}),n=e(t,2),r=n[0],i=n[1];this.w=r,this.h=i}},u=i,d="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase()),c=document.head||document.getElementsByTagName("head")[0],l={},f=o;const p=s;var m=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"vue-aspect-ratio"},[n("div",{staticClass:"vue-aspect-ratio__inner",style:e.innerStyle},[n("div",{staticClass:"vue-aspect-ratio__content"},[e._t("default")],2)])])},v=[];const h=function(e){e&&e("data-v-69342252_0",{source:".vue-aspect-ratio__inner[data-v-69342252]{position:relative}.vue-aspect-ratio__content[data-v-69342252]{position:absolute;top:0;left:0;width:100%;height:100%}",map:void 0,media:void 0})};var _=u({render:m,staticRenderFns:v},h,p,"data-v-69342252",!1,void 0,f,void 0),y=Object.freeze({__proto__:null,default:_});return function(e){return e&&e.default||e}(y)});
\ No newline at end of file
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self,e.VueAspectRatio=t())}(this,function(){"use strict";function e(e,i){return t(e)||n(e,i)||r()}function t(e){if(Array.isArray(e))return e}function n(e,t){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e)){var n=[],r=!0,i=!1,o=void 0;try{for(var a,s=e[Symbol.iterator]();!(r=(a=s.next()).done)&&(n.push(a.value),!t||n.length!==t);r=!0);}catch(e){i=!0,o=e}finally{try{r||null==s.return||s.return()}finally{if(i)throw o}}return n}}function r(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}function i(e,t,n,r,i,o,a,s,d,u){"boolean"!=typeof a&&(d=s,s=a,a=!1);var c="function"==typeof n?n.options:n;e&&e.render&&(c.render=e.render,c.staticRenderFns=e.staticRenderFns,c._compiled=!0,i&&(c.functional=!0)),r&&(c._scopeId=r);var l;if(o?(l=function(e){e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,e||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,d(e)),e&&e._registeredComponents&&e._registeredComponents.add(o)},c._ssrRegister=l):t&&(l=a?function(){t.call(this,u(this.$root.$options.shadowRoot))}:function(e){t.call(this,s(e))}),l)if(c.functional){var f=c.render;c.render=function(e,t){return l.call(t),f(e,t)}}else{var p=c.beforeCreate;c.beforeCreate=p?[].concat(p,l):[l]}return n}function o(e){return function(e,t){return a(e,t)}}function a(e,t){var n=u?t.media||"default":e,r=l[n]||(l[n]={ids:new Set,styles:[]});if(!r.ids.has(e)){r.ids.add(e);var i=t.source;if(t.map&&(i+="\n/*# sourceURL="+t.map.sources[0]+" */",i+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),r.element||(r.element=document.createElement("style"),r.element.type="text/css",t.media&&r.element.setAttribute("media",t.media),c.appendChild(r.element)),"styleSheet"in r.element)r.styles.push(i),r.element.styleSheet.cssText=r.styles.filter(Boolean).join("\n");else{var o=r.ids.size-1,a=document.createTextNode(i),s=r.element.childNodes;s[o]&&r.element.removeChild(s[o]),s.length?r.element.insertBefore(a,s[o]):r.element.appendChild(a)}}}var s={name:"VueAspectRatio",props:{ar:{type:String,default:"1:1",validator:function(t){var n=t.split(":").map(function(e){return parseInt(e)}),r=e(n,2),i=r[0],o=r[1];return!Number.isNaN(i)&&!Number.isNaN(o)}},width:String},data:function(){return{w:null,h:null}},computed:{componentStyle:function(){return this.width?{width:this.width}:{}},innerStyle:function(){return{paddingTop:this.h/this.w*100+"%"}}},created:function(){var t=this.ar.split(":").map(function(e){return parseInt(e)}),n=e(t,2),r=n[0],i=n[1];this.w=r,this.h=i}},d=i,u="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase()),c=document.head||document.getElementsByTagName("head")[0],l={},f=o;const p=s;var m=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"vue-aspect-ratio",style:e.componentStyle},[n("div",{staticClass:"vue-aspect-ratio__inner",style:e.innerStyle},[n("div",{staticClass:"vue-aspect-ratio__content"},[e._t("default")],2)])])},h=[];const v=function(e){e&&e("data-v-f0460d78_0",{source:".vue-aspect-ratio__inner[data-v-f0460d78]{position:relative}.vue-aspect-ratio__content[data-v-f0460d78]{position:absolute;top:0;left:0;width:100%;height:100%}",map:void 0,media:void 0})};var y=d({render:m,staticRenderFns:h},v,p,"data-v-f0460d78",!1,void 0,f,void 0),_=Object.freeze({__proto__:null,default:y});return function(e){return e&&e.default||e}(_)});
\ No newline at end of file