Issue #2884315 by ahmadhalah, RajabNatshah: [Varbase Media] Image Caption doesn't fit the image

modules/varbase_features/varbase_media/css/varbase_media.common.css

 /**
  * Varbase media common library style.
  */
-
 /**
  * Alignment classes for embedded entities.
  */
 /* Image align center style */
-.embedded-entity.align-center img,
-figure.align-center img,
-img.align-center {
+.embedded-entity.align-center img {
   display: block;
   margin-left: auto;
   margin-right: auto;
 }
-
-/* Image caption align center style */
-.embedded-entity.align-center figcaption,
-figure.align-center figcaption {
+.embedded-entity.align-center figcaption {
   display: block;
   margin-left: auto;
   margin-right: auto;
   text-align: center;
 }
-
-/* Image align right style */
-.embedded-entity.align-right,
-figure.align-right,
-picture.align-right,
-img.align-right {
+.embedded-entity.align-right {
+  margin: 0 0 8px 8px;
+}
+.embedded-entity.align-right figcaption {
+  text-align: center;
+}
+.embedded-entity.align-left {
+  margin: 0 8px 8px 0;
+}
+.embedded-entity.align-left figcaption {
+  text-align: center;
+}
+picture.align-right {
   margin: 0 0 8px 8px;
 }
-
-/* Image caption align right style */
-.embedded-entity.align-right figcaption,
-figure.align-right figcaption,
 picture.align-right figcaption {
   text-align: center;
 }
-
-/* Image align left style */
-.embedded-entity.align-left,
-figure.align-left,
-picture.align-left,
-img.align-left {
+picture.align-left {
   margin: 0 8px 8px 0;
 }
-
-/* Image caption align left style */
-.embedded-entity.align-left figcaption,
-figure.align-left figcaption,
 picture.align-left figcaption {
   text-align: center;
 }
+figure.align-center img {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+figure.align-center figcaption {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  text-align: center;
+}
+figure.align-right {
+  display: table;
+  margin: 0 0 8px 8px;
+}
+figure.align-right figcaption {
+  display: table-caption;
+  caption-side: bottom;
+}
+figure.align-left {
+  display: table;
+  margin: 0 8px 8px 0;
+}
+figure.align-left figcaption {
+  display: table-caption;
+  caption-side: bottom;
+}
+img.align-center {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+img.align-right {
+  margin: 0 0 8px 8px;
+}
+/* Image caption Right and Left style (Fit Image) */
+figure.align-right,
+figure.align-left {
+  display: table;
+}
+figure.align-right figcaption,
+figure.align-left figcaption {
+  display: table-caption;
+  caption-side: bottom;
+}
+/*# sourceMappingURL=varbase_media.common.css.map */
\ No newline at end of file

modules/varbase_features/varbase_media/css/varbase_media.common.css.map

+{"version":3,"sources":["../less/varbase_media.common.less"],"names":[],"mappings":";;;;;;;AASE,gBAAC,aACC;EACE,cAAA;EACA,iBAAA;EACA,kBAAA;;AAJJ,gBAAC,aAOC;EACE,cAAA;EACA,iBAAA;EACA,kBAAA;EACA,kBAAA;;AAIJ,gBAAC;EACC,mBAAA;;AADF,gBAAC,YAGC;EACE,kBAAA;;AAIJ,gBAAC;EACC,mBAAA;;AADF,gBAAC,WAGC;EACE,kBAAA;;AAMJ,OAAC;EACC,mBAAA;;AADF,OAAC,YAGC;EACE,kBAAA;;AAIJ,OAAC;EACC,mBAAA;;AADF,OAAC,WAGC;EACE,kBAAA;;AAMJ,MAAC,aACC;EACE,cAAA;EACA,iBAAA;EACA,kBAAA;;AAJJ,MAAC,aAOC;EACE,cAAA;EACA,iBAAA;EACA,kBAAA;EACA,kBAAA;;AAIJ,MAAC;EACC,cAAA;EACA,mBAAA;;AAFF,MAAC,YAIC;EACE,sBAAA;EACA,oBAAA;;AAIJ,MAAC;EACC,cAAA;EACA,mBAAA;;AAFF,MAAC,WAIC;EACE,sBAAA;EACA,oBAAA;;AAMJ,GAAC;EACC,cAAA;EACA,iBAAA;EACA,kBAAA;;AAGF,GAAC;EACC,mBAAA;;;AAKJ,MAAM;AACN,MAAM;EACJ,cAAA;;AAFF,MAAM,YAIJ;AAHF,MAAM,WAGJ;EACE,sBAAA;EACA,oBAAA","file":"varbase_media.common.css"}
\ No newline at end of file

modules/varbase_features/varbase_media/css/varbase_media.common_logged.css

 /**
  * Varbase media common logged in users style.
  */
-
 /* Style the entity select and editor image dialog for images. */
-.entity-select-dialog #entity-embed-dialog-form .form-type-radio,
+.entity-select-dialog #entity-embed-dialog-form .form-type-radio {
+  display: block;
+}
+.entity-select-dialog #entity-embed-dialog-form .form-type-radio label:after {
+  content: "";
+}
+.entity-select-dialog #entity-embed-dialog-form .radio input[type="radio"],
+.entity-select-dialog #entity-embed-dialog-form .checkbox input[type="radio"] {
+  margin-right: 5px;
+}
+.entity-select-dialog #entity-embed-dialog-form .input-group .select-wrapper:first-child .form-control:first-child {
+  border-bottom-left-radius: 4px;
+  border-top-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+  border-top-right-radius: 4px;
+}
+.entity-select-dialog #entity-embed-dialog-form .form-item-attributes-data-entity-embed-display .input-group-addon {
+  display: none;
+}
 .editor-image-dialog #editor-image-dialog-form .form-type-radio {
   display: block;
 }
-
-.entity-select-dialog #entity-embed-dialog-form .form-type-radio label:after,
 .editor-image-dialog #editor-image-dialog-form .form-type-radio label:after {
   content: "";
 }
-
-.entity-select-dialog #entity-embed-dialog-form .radio input[type="radio"],
-.entity-select-dialog #entity-embed-dialog-form .checkbox input[type="checkbox"],
 .editor-image-dialog #editor-image-dialog-form .radio input[type="radio"],
-.editor-image-dialog #editor-image-dialog-form .checkbox input[type="checkbox"] {
+.editor-image-dialog #editor-image-dialog-form .checkbox input[type="radio"] {
   margin-right: 5px;
 }
-
-.entity-select-dialog #entity-embed-dialog-form .input-group .select-wrapper:first-child .form-control:first-child,
 .editor-image-dialog #editor-image-dialog-form .input-group .select-wrapper:first-child .form-control:first-child {
   border-bottom-left-radius: 4px;
   border-top-left-radius: 4px;
   border-bottom-right-radius: 4px;
   border-top-right-radius: 4px;
 }
-
-.entity-select-dialog #entity-embed-dialog-form .form-item-attributes-data-entity-embed-display .input-group-addon,
 .editor-image-dialog #editor-image-dialog-form .form-item-attributes-data-entity-embed-display .input-group-addon {
   display: none;
 }
-
 /* Style the CKEditor widget for images. */
-.cke_widget_wrapper.align-left {
+.cke_widget_wrapper .align-left {
   margin: 0 8px 8px 0;
 }
-
-.cke_widget_wrapper.align-right {
+.cke_widget_wrapper .align-left figcaption {
+  text-align: center;
+}
+.cke_widget_wrapper .align-right {
   margin: 0 0 8px 8px;
 }
-
-.cke_widget_wrapper.align-right figcaption,
-.cke_widget_wrapper.align-left figcaption,
-.cke_widget_wrapper.align-center figcaption {
+.cke_widget_wrapper .align-right figcaption {
+  text-align: center;
+}
+.cke_widget_wrapper .align-center figcaption {
   text-align: center;
 }
-
 /** Field type entity reference **/
 body .form-wrapper.field--widget-entity-browser-entity-reference .entities-list .item-container {
   position: relative;
 }
-
 body .form-wrapper.field--widget-entity-browser-entity-reference .entities-list .item-container .field--name-name {
   display: none;
   position: absolute;
@@ -67,17 +74,17 @@ body .form-wrapper.field--widget-entity-browser-entity-reference .entities-list
   color: #fff;
   word-break: break-all;
 }
-
 body .form-wrapper.field--widget-entity-browser-entity-reference .entities-list .item-container:hover .field--name-name {
   display: block;
 }
-
+body .form-wrapper.field--widget-entity-browser-entity-reference .entities-list .item-container:hover input {
+  display: block;
+}
 body .form-wrapper.field--widget-entity-browser-entity-reference .entities-list .item-container input {
   position: absolute;
   top: 0;
   display: none;
   font-size: 0;
-  border: 0;
   padding: 0;
   border: 0;
   width: 30px;
@@ -88,7 +95,6 @@ body .form-wrapper.field--widget-entity-browser-entity-reference .entities-list
   cursor: pointer;
   opacity: 1;
 }
-
 body .form-wrapper.field--widget-entity-browser-entity-reference .entities-list .item-container input[id*="-edit-button"] {
   background-image: url("../images/pencil-square-o.svg");
   background-repeat: no-repeat;
@@ -97,7 +103,14 @@ body .form-wrapper.field--widget-entity-browser-entity-reference .entities-list
   left: 0;
   right: auto;
 }
-
+body .form-wrapper.field--widget-entity-browser-entity-reference .entities-list .item-container input[id*="-remove-button"] {
+  background-image: url("../images/pencil-square-o.svg");
+  background-repeat: no-repeat;
+  background-position: left top;
+  background-size: 100%;
+  left: 0;
+  right: auto;
+}
 body .form-wrapper.field--widget-entity-browser-entity-reference .entities-list .item-container input[id*="-remove-button"] {
   background-image: url("../images/times-circle-o.svg");
   background-repeat: no-repeat;
@@ -106,45 +119,34 @@ body .form-wrapper.field--widget-entity-browser-entity-reference .entities-list
   right: 0;
   left: auto;
 }
-
-body .form-wrapper.field--widget-entity-browser-entity-reference .entities-list .item-container:hover input {
-  display: block;
-}
-
-[dir=rtl] body .form-wrapper.field--widget-entity-browser-entity-reference .entities-list .item-container input[id*="-edit-button"] {
+[dir="rtl"] body .form-wrapper.field--widget-entity-browser-entity-reference .entities-list .item-container input[id*="-edit-button"] {
   left: auto;
   right: 0;
 }
-
-[dir=rtl] body .form-wrapper.field--widget-entity-browser-entity-reference .entities-list .item-container input[id*="-remove-button"] {
+[dir="rtl"] body .form-wrapper.field--widget-entity-browser-entity-reference .entities-list .item-container input[id*="-remove-button"] {
   right: auto;
   left: 0;
 }
-
 /* Embed_media_form image Preview style */
 .entity-embed-dialog-step--embed > .form-item-entity {
   float: right;
   text-align: center;
 }
-
 [dir="rtl"] .entity-embed-dialog-step--embed > .form-item-entity {
   float: left;
   text-align: center;
 }
-
 /** Style the dropzone upload in entity browsers  **/
 .entity-browser-form div#ief-dropzone-upload > div {
-  border: 2px dashed hsla(0,0%,42%,0.65);
+  border: 2px dashed rgba(107, 107, 107, 0.65);
   border-radius: 20px;
   padding: 15px;
   margin: 0 15px 15px 15px;
 }
-
 .entity-browser-form div#ief-dropzone-upload > div .image-widget-data {
   float: left;
   width: 70%;
 }
-
 a.entity-browser-handle.entity-browser-iframe {
   margin: 15px 0;
   padding: 15px;
@@ -156,7 +158,7 @@ a.entity-browser-handle.entity-browser-iframe {
   font-size: 1.3em;
   text-decoration: none;
 }
-
 a.entity-browser-handle.entity-browser-iframe:hover {
   text-decoration: none;
 }
+/*# sourceMappingURL=varbase_media.common_logged.css.map */
\ No newline at end of file

modules/varbase_features/varbase_media/css/varbase_media.common_logged.css.map

+{"version":3,"sources":["../less/varbase_media.common_logged.less"],"names":[],"mappings":";;;;AAKA,qBACE,0BACE;EACE,cAAA;;AAGE,qBALN,0BACE,iBAGE,MACG;EACC,SAAS,EAAT;;AAPV,qBACE,0BAWE,OAEE,MAAK;AAdX,qBACE,0BAYE,UACE,MAAK;EACH,iBAAA;;AAQI,qBAtBV,0BAkBE,aACE,gBACG,YACC,cACG;EACC,8BAAA;EACA,2BAAA;EACA,+BAAA;EACA,4BAAA;;AA3Bd,qBACE,0BAiCE,gDACE;EACE,aAAA;;AAMR,oBACE,0BACE;EACE,cAAA;;AAGE,oBALN,0BACE,iBAGE,MACG;EACC,SAAS,EAAT;;AAPV,oBACE,0BAWE,OAEE,MAAK;AAdX,oBACE,0BAYE,UACE,MAAK;EACH,iBAAA;;AAQI,oBAtBV,0BAkBE,aACE,gBACG,YACC,cACG;EACC,8BAAA;EACA,2BAAA;EACA,+BAAA;EACA,4BAAA;;AA3Bd,oBACE,0BAiCE,gDACE;EACE,aAAA;;;AAOR,mBACE;EACE,mBAAA;;AAFJ,mBACE,YAGE;EACE,kBAAA;;AALN,mBASE;EACE,mBAAA;;AAVJ,mBASE,aAGE;EACE,kBAAA;;AAbN,mBAiBE,cACE;EACE,kBAAA;;;AAQF,IADF,cACG,8CACC,eACE;EACE,kBAAA;;AAHN,IADF,cACG,8CACC,eACE,gBAGE;EACE,aAAA;EACA,kBAAA;EACA,WAAA;EACA,OAAA;EACA,QAAA;EACA,cAAA;EACA,SAAA;EACA,gBAAA;EACA,YAAA;EACA,cAAA;EACA,WAAA;EACA,qBAAA;;AAKF,IAvBR,cACG,8CACC,eAoBE,gBACG,MACC;EACE,cAAA;;AAFJ,IAvBR,cACG,8CACC,eAoBE,gBACG,MAKC;EACE,cAAA;;AA5BV,IADF,cACG,8CACC,eAoBE,gBAWE;EACE,kBAAA;EACA,MAAA;EACA,aAAA;EACA,YAAA;EAEA,UAAA;EACA,SAAA;EACA,WAAA;EACA,YAAA;EACA,WAAA;EACA,uBAAA;EACA,6BAAA;EACA,eAAA;EACA,UAAA;;AA9CR,IADF,cACG,8CACC,eAoBE,gBA4BE,MAAK;EACH,sBAAsB,gCAAtB;EACA,4BAAA;EACA,6BAAA;EACA,qBAAA;EACA,OAAA;EACA,WAAA;;AAvDR,IADF,cACG,8CACC,eAoBE,gBAqCE,MAAK;EACH,sBAAsB,gCAAtB;EACA,4BAAA;EACA,6BAAA;EACA,qBAAA;EACA,OAAA;EACA,WAAA;;AAhER,IADF,cACG,8CACC,eAoBE,gBA8CE,MAAK;EACH,sBAAsB,+BAAtB;EACA,4BAAA;EACA,6BAAA;EACA,qBAAA;EACA,QAAA;EACA,UAAA;;AAWR,WAFQ,KACV,cACG,8CACC,eACE,gBACE,MAAK;EACH,UAAA;EACA,QAAA;;AALR,WAFQ,KACV,cACG,8CACC,eACE,gBAME,MAAK;EACH,WAAA;EACA,OAAA;;;AASZ,gCACE;EACE,YAAA;EACA,kBAAA;;AAIJ,WAAY,iCACV;EACE,WAAA;EACA,kBAAA;;;AAKJ,oBACE,IAAG,oBACD;EACE,4CAAA;EACA,mBAAA;EACA,aAAA;EACA,wBAAA;;AANN,oBACE,IAAG,oBACD,MAME;EACE,WAAA;EACA,UAAA;;AAON,CADD,sBACE;EACC,cAAA;EACA,aAAA;EACA,cAAA;EACA,mBAAA;EACA,WAAA;EACA,kBAAA;EACA,iBAAA;EACA,gBAAA;EACA,qBAAA;;AAEA,CAZH,sBACE,sBAWE;EACC,qBAAA","file":"varbase_media.common_logged.css"}
\ No newline at end of file

modules/varbase_features/varbase_media/less/varbase_media.common.less

+/**
+ * Varbase media common library style.
+ */
+
+/**
+ * Alignment classes for embedded entities.
+ */
+/* Image align center style */
+.embedded-entity {
+  &.align-center {
+    img {
+      display: block;
+      margin-left: auto;
+      margin-right: auto;
+    }
+    
+    figcaption {
+      display: block;
+      margin-left: auto;
+      margin-right: auto;
+      text-align: center;
+    }
+  }
+  
+  &.align-right {
+    margin: 0 0 8px 8px;
+    
+    figcaption {
+      text-align: center;
+    }
+  }
+  
+  &.align-left {
+    margin: 0 8px 8px 0;
+    
+    figcaption {
+      text-align: center;
+    }
+  }
+}
+
+picture {
+  &.align-right {
+    margin: 0 0 8px 8px;
+    
+    figcaption {
+      text-align: center;
+    }
+  }
+
+  &.align-left {
+    margin: 0 8px 8px 0;
+    
+    figcaption {
+      text-align: center;
+    }
+  }
+}
+
+figure {
+  &.align-center {
+    img {
+      display: block;
+      margin-left: auto;
+      margin-right: auto;
+    }
+    
+    figcaption {
+      display: block;
+      margin-left: auto;
+      margin-right: auto;
+      text-align: center;
+    }
+  }
+  
+  &.align-right {
+    display:table;
+    margin: 0 0 8px 8px;
+    
+    figcaption {
+      display: table-caption;
+      caption-side: bottom;
+    }
+  }
+
+  &.align-left {
+    display:table;
+    margin: 0 8px 8px 0;
+    
+    figcaption {
+      display: table-caption;
+      caption-side: bottom;
+    }
+  }
+}
+
+img {
+  &.align-center {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  &.align-right {
+    margin: 0 0 8px 8px;
+  }
+}
+
+/* Image caption Right and Left style (Fit Image) */
+figure.align-right,
+figure.align-left {
+  display:table;
+  
+  figcaption {
+    display: table-caption;
+    caption-side: bottom;
+  }
+}

modules/varbase_features/varbase_media/less/varbase_media.common_logged.less

+/**
+ * Varbase media common logged in users style.
+ */
+
+/* Style the entity select and editor image dialog for images. */
+.entity-select-dialog {
+  #entity-embed-dialog-form {
+    .form-type-radio {
+      display: block;
+
+      label {
+        &:after {
+          content: "";
+        }
+      }
+    }
+    
+    .radio,
+    .checkbox {
+      input[type="radio"] {
+        margin-right: 5px;
+      }
+    }
+    
+    .input-group {
+      .select-wrapper {
+        &:first-child {
+          .form-control {
+            &:first-child {
+              border-bottom-left-radius: 4px;
+              border-top-left-radius: 4px;
+              border-bottom-right-radius: 4px;
+              border-top-right-radius: 4px;
+            }
+          }
+        }
+      }
+    }
+    
+    .form-item-attributes-data-entity-embed-display {
+      .input-group-addon {
+        display: none;
+      }
+    }
+  }
+}
+
+.editor-image-dialog {
+  #editor-image-dialog-form {
+    .form-type-radio {
+      display: block;
+
+      label {
+        &:after {
+          content: "";
+        }
+      }
+    }
+
+    .radio,
+    .checkbox {
+      input[type="radio"] {
+        margin-right: 5px;
+      }
+    }
+
+    .input-group {
+      .select-wrapper {
+        &:first-child {
+          .form-control {
+            &:first-child {
+              border-bottom-left-radius: 4px;
+              border-top-left-radius: 4px;
+              border-bottom-right-radius: 4px;
+              border-top-right-radius: 4px;
+            }
+          }
+        }
+      }
+    }
+    
+    .form-item-attributes-data-entity-embed-display {
+      .input-group-addon {
+        display: none;
+      }
+    }
+  }
+}
+
+/* Style the CKEditor widget for images. */
+.cke_widget_wrapper {
+  .align-left {
+    margin: 0 8px 8px 0;
+
+    figcaption {
+      text-align: center;
+    }
+  }
+  
+  .align-right {
+    margin: 0 0 8px 8px;
+
+    figcaption {
+      text-align: center;
+    }
+  }
+  
+  .align-center {
+    figcaption {
+      text-align: center;
+    }
+  }
+}
+
+/** Field type entity reference **/
+body {
+  .form-wrapper {
+    &.field--widget-entity-browser-entity-reference {
+      .entities-list {
+        .item-container {
+          position: relative;
+          
+          .field--name-name {
+            display: none;
+            position: absolute;
+            bottom: 3px;
+            left: 0;
+            right: 0;
+            padding: 0.5em;
+            margin: 0;
+            background: #000;
+            opacity: 0.8;
+            font-size: 9px;
+            color: #fff;
+            word-break: break-all;
+          }
+        }
+        
+        .item-container {
+          &:hover {
+            .field--name-name {
+              display: block;
+            }
+            
+            input {
+              display: block;
+            }
+          }
+          
+          input {
+            position: absolute;
+            top: 0;
+            display: none;
+            font-size: 0;
+            border: 0;
+            padding: 0;
+            border: 0;
+            width: 30px;
+            height: 30px;
+            margin: 5px;
+            background: transparent;
+            background-color: transparent;
+            cursor: pointer;
+            opacity: 1;
+          }
+          
+          input[id*="-edit-button"] {
+            background-image: url("../images/pencil-square-o.svg");
+            background-repeat: no-repeat;
+            background-position: left top;
+            background-size: 100%;
+            left: 0;
+            right: auto;
+          }
+          
+          input[id*="-remove-button"] {
+            background-image: url("../images/pencil-square-o.svg");
+            background-repeat: no-repeat;
+            background-position: left top;
+            background-size: 100%;
+            left: 0;
+            right: auto;
+          }
+          
+          input[id*="-remove-button"] {
+            background-image: url("../images/times-circle-o.svg");
+            background-repeat: no-repeat;
+            background-position: left top;
+            background-size: 100%;
+            right: 0;
+            left: auto;
+          }
+        }
+      }
+    }
+  }
+}
+
+
+[dir="rtl"] body {
+  .form-wrapper {
+    &.field--widget-entity-browser-entity-reference {
+      .entities-list {
+        .item-container {
+          input[id*="-edit-button"] {
+            left: auto;
+            right: 0;
+          }
+
+          input[id*="-remove-button"] {
+            right: auto;
+            left: 0;
+          }
+        }
+      }
+    }
+  }
+}
+
+/* Embed_media_form image Preview style */
+.entity-embed-dialog-step--embed {
+  > .form-item-entity {
+    float: right;
+    text-align: center;
+  }
+}
+
+[dir="rtl"] .entity-embed-dialog-step--embed {
+  > .form-item-entity {
+    float: left;
+    text-align: center;
+  }
+}
+
+/** Style the dropzone upload in entity browsers  **/
+.entity-browser-form {
+  div#ief-dropzone-upload {
+    > div {
+      border: 2px dashed hsla(0,0%,42%,0.65);
+      border-radius: 20px;
+      padding: 15px;
+      margin: 0 15px 15px 15px;
+      
+      .image-widget-data {
+        float: left;
+        width: 70%;
+      }
+    }
+  }
+}
+
+a.entity-browser-handle {
+  &.entity-browser-iframe {
+    margin: 15px 0;
+    padding: 15px;
+    display: block;
+    background: #0074bd;
+    color: #fff;
+    text-align: center;
+    font-weight: bold;
+    font-size: 1.3em;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+}