diff --git a/src/config/config.js b/src/config/config.js
index 6e11316..0b190d2 100644
--- a/src/config/config.js
+++ b/src/config/config.js
@@ -13,7 +13,8 @@ const defaultOptions = {
     // `rect` | `circle`
     shape: 'rect',
     color: '#EFEFEF',
-    shapeOpposite: []
+    shapeOpposite: [],
+    fixedSize: false
   },
   button: {
     color: '#EFEFEF',
diff --git a/src/config/optionsSchema.json b/src/config/optionsSchema.json
index ffafbb2..2b38a29 100644
--- a/src/config/optionsSchema.json
+++ b/src/config/optionsSchema.json
@@ -49,6 +49,9 @@
         },
         "shapeOpposite": {
           "type": "array"
+        },
+        "fixedSize": {
+          "type": "boolean"
         }
       }
     },
@@ -102,11 +105,11 @@
     },
     "device": {
       "description": "The device you want to generate skeleton page",
-      "type": "string"     
+      "type": "string"
     },
     "debug": {
       "description": "Weather to show debug info",
-      "type": "boolean"     
+      "type": "boolean"
     },
     "minify": {
       "description": "Weather to minify the HTML",
@@ -114,35 +117,35 @@
         "type": "object"
       }, {
         "type": "boolean"
-      }]   
+      }]
     },
     "defer": {
       "description": "Defer to generate skeleton page",
-      "type": "number"     
+      "type": "number"
     },
     "excludes": {
       "description": "which element that you dont want to generate skeleton",
-      "type": "array"     
+      "type": "array"
     },
     "remove": {
       "description": "the elements that you want to remove",
-      "type": "array"     
+      "type": "array"
     },
     "hide": {
       "description": "the element that you want to hide",
-      "type": "array"     
+      "type": "array"
     },
     "grayBlock": {
       "description": "the element that you just want to make it display a gray block",
-      "type": "array"     
+      "type": "array"
     },
     "cookies": {
       "description": "Add cookies to the page which puppeteer opened",
-      "type": "array"     
+      "type": "array"
     },
     "headless": {
       "description": "Open headless chrome or not",
-      "type": "boolean"     
+      "type": "boolean"
     },
     "cssUnit": {
       "description": "The css unit used in shell.html",
@@ -152,7 +155,7 @@
         "vh",
         "vmin",
         "vmax"
-      ]  
+      ]
     },
     "decimal": {
       "description": "The decimal of CSS value",
diff --git a/src/script/index.js b/src/script/index.js
index af97c97..9ef7c74 100644
--- a/src/script/index.js
+++ b/src/script/index.js
@@ -17,6 +17,9 @@ var Skeleton = (function (exports) {
   const MOCK_TEXT_ID = 'sk-text-id';
   const Node = window.Node;
 
+  // 给图片打上固定宽高标签，将会设置行内宽高样式，保证生成骨架后的宽高不会受其他样式影响而变化（目前只针对图片）
+  const IMAGE_FIXED = 'data-pswp-fixedsize';
+
   /**
    * a Map instance to cache the styles which will be inserted into the skeleton page.
    * key is the selector and value is the css rules.
@@ -172,7 +175,7 @@ var Skeleton = (function (exports) {
     const rule = `{
     background: ${color} !important;
   }`;
-    
+
     addStyle(`.${imageClass}`, rule);
 
     shapeStyle(shape);
@@ -215,8 +218,9 @@ var Skeleton = (function (exports) {
     });
   }
 
-  function imgHandler(ele, { color, shape, shapeOpposite }) {
+  function imgHandler(ele, { color, shape, shapeOpposite, fixedSize }) {
     const { width, height } = ele.getBoundingClientRect();
+    const isFixed = ele.hasAttribute(IMAGE_FIXED) || fixedSize;
     const attrs = {
       width,
       height,
@@ -226,7 +230,11 @@ var Skeleton = (function (exports) {
     const finalShape = shapeOpposite.indexOf(ele) > -1 ? getOppositeShape(shape) : shape;
 
     setAttributes(ele, attrs);
-    
+    if (isFixed) {
+      ele.style.width = `${width}px`;
+      ele.style.height = `${height}px`;
+    }
+
     const className = CLASS_NAME_PREFEX + 'image';
     const shapeName = CLASS_NAME_PREFEX + finalShape;
     const rule = `{