diff --git a/inc/media.php b/inc/media.php
index bb3fc22dc36adc14e5f6a98513fd2bc516d56aa9..99567632c8a28af28715d866a64591898cb9da2f 100644
--- a/inc/media.php
+++ b/inc/media.php
@@ -1161,12 +1161,19 @@ function media_image_diff($image, $l_rev, $r_rev, $meta, $type) {
     $l_src = ml($image, $l_more);
     $r_src = ml($image, $r_more);
 
-    echo '<div id="mediamanager__diff_'.$type.'_image1" style="background-image: url(\''.$l_src.'\'); max-width: '.$l_size[0].'px; height: '.$l_size[1].'px; " >';
-    echo '<div id="mediamanager__diff_'.$type.'_image2" style="background-image: url(\''.$r_src.'\'); max-width: '.$l_size[0].'px; height: '.$l_size[1].'px; " >';
+    // slider
+    echo '<div id="mediamanager__'.$type.'_slider" style="max-width: '.($l_size[0]-20).'px;" ></div>';
+
+    // two image's in div's
+    echo '<div id="mediamanager__diff_layout">';
+    echo '<div id="mediamanager__diff_'.$type.'_image1" style="max-width: '.$l_size[0].'px;">'; //  height: '.$l_size[1].'px;
+    echo '<img src="'.$l_src.'" />';
+    echo '</div>';
+    echo '<div id="mediamanager__diff_'.$type.'_image2" style="max-width: '.$l_size[0].'px;">'; // height: '.$l_size[1].'px;
+    echo '<img src="'.$r_src.'" />';
     echo '</div>';
     echo '</div>';
 
-    echo '<div id="mediamanager__'.$type.'_slider" style="max-width: '.($l_size[0]-20).'px;" ></div>';
     echo '</div>';
 }
 
diff --git a/lib/scripts/media.js b/lib/scripts/media.js
index 17006e28901af20809c3eaa6b58353730dca97da..e8c492f5f73bcbf0a96b6131bcac483922261762 100644
--- a/lib/scripts/media.js
+++ b/lib/scripts/media.js
@@ -436,6 +436,10 @@ var dw_mediamanager = {
 
         dw_mediamanager.layout_width = jQuery('#mediamanager__layout').width();
 
+        // rebuild sliders if exists
+        dw_mediamanager.opacity_slider();
+        dw_mediamanager.portions_slider();
+
         $r = jQuery("#mediamanager__layout .layout-resizable, #mediamanager__layout .layout");
 
         var w = 0, wSum = 0, mCount = 0, mArray = [];
@@ -586,15 +590,39 @@ var dw_mediamanager = {
      * @author Kate Arzamastseva <pshns@ukr.net>
      */
     portions_slider: function () {
-        var $slider = jQuery( "#mediamanager__portions_slider" );
-        $slider.slider();
-        $slider.slider("option", "min", 0);
-        $slider.slider("option", "max", 100);
-        $slider.slider("option", "step", 1);
-        $slider.slider("option", "value", 50);
-        $slider.bind("slide", function(event, ui) {
-            jQuery('#mediamanager__diff_portions_image2').css({ width: $slider.slider("option", "value")+'%'});
-        });
+        var $image2 = jQuery('#mediamanager__diff_portions_image2 img');
+        if ($image2) {
+            $image2 = jQuery($image2[0]);
+
+            $image2.parent().css({
+                width: '100%'
+            });
+
+            $image2.css({
+                width: '100%',
+                height: 'auto'
+            });
+
+            $image2.css({
+                width: $image2.width() + 'px',
+                height: $image2.height() + 'px'
+            });
+
+            var $div = jQuery("#mediamanager__diff_layout");
+            if ($image2.width() < $div.width()) {
+                $div.width($image2.width());
+            }
+
+            var $slider = jQuery("#mediamanager__portions_slider");
+            $slider.slider();
+            $slider.slider("option", "min", 0);
+            $slider.slider("option", "max", 100);
+            $slider.slider("option", "step", 1);
+            $slider.slider("option", "value", 50);
+            $slider.bind("slide", function(event, ui) {
+                jQuery('#mediamanager__diff_portions_image2').css({ width: $slider.slider("option", "value")+'%'});
+            });
+        }
     },
 
     prepare_content: function ($content) {
diff --git a/lib/tpl/default/mediamanager.css b/lib/tpl/default/mediamanager.css
index 353230cc6d3ae5fc0a54f01f8270451fd99d7b24..a2fd35a47097611db8ec3cce31145dbe312c9da2 100644
--- a/lib/tpl/default/mediamanager.css
+++ b/lib/tpl/default/mediamanager.css
@@ -355,18 +355,22 @@ form.meta textarea.edit {
     margin-bottom: 10px;
 }
 
-#mediamanager__diff_opacity_image1,
-#mediamanager__diff_portions_image1 {
-    width: 99%;
+#mediamanager__diff_layout {
     position: relative;
-    margin-top: 10px;
 }
 
-#mediamanager__diff_opacity_image2 {
-    width: 100%;
+#mediamanager__diff_layout div {
     position: absolute;
     top: 0;
     left: 0;
+    width: 100%;
+}
+
+#mediamanager__diff_layout div img {
+    width: 100%;
+}
+
+#mediamanager__diff_opacity_image2 {
     -moz-opacity: 0.5;
     -khtml-opacity: 0.5;
     opacity: 0.5;
@@ -374,10 +378,8 @@ form.meta textarea.edit {
 
 #mediamanager__diff_portions_image2 {
     width: 50%;
-    position: absolute;
-    top: 0;
-    left: 0;
     border-right: 1px solid red;
+    overflow: hidden;
 }
 
 #mediamanager__opacity_slider,