Use picture tag for bg image

app/models/elastic_slider_panel_widget.rb

@@ -17,4 +17,22 @@ def self.valid_container_classes
     [ElasticSliderWidget]
   end
 
+  def transform_for_desktop(width)
+    if container.slider_height.to_i > 100
+      image.binary.transform(width: width, height: self.height, fit: :crop, crop: :center)
+    else
+      image.binary.transform(width: width)
+    end
+  end
+
+  def fallback_transform
+    if container.slider_height.to_i > 100
+      return { width: 1920, height: self.height, fit: :crop, crop: :center }
+    end
+  end
+
+  def height
+    h = container.slider_height.to_i
+    h > 100 ? h+200 : image.meta_data[:height] # 50vh, 100vh is dynamic, no height calculation possible
+  end
 end

app/views/elastic_slider_panel_widget/show.html.erb

@@ -1,5 +1,22 @@
 <div class="item <%= widget.additional_classes(params) %>">
-  <%= scrivito_image_tag widget, :image %>
+  <picture>
+    <source media='(max-width: 400px) and (orientation: portrait)'
+     sizes='100vw'
+     srcset='<%= widget.image.binary.transform(width: 400, height: widget.height, fit: :crop, crop: :center).url %>'>
+
+    <source media='(max-width: 768px)'
+     sizes='100vw'
+     srcset='<%= widget.image.binary.transform(width: 768, height: widget.height, fit: :crop, crop: :center).url %>'>
+
+    <source media='(min-width: 668px) and (max-width: 991px)'
+      sizes='100vw'
+      srcset='<%= widget.transform_for_desktop(991).url %>'>
+
+    <source media='(min-width: 991px) and (max-width: 1200px)'
+      sizes='100vw'
+      srcset='<%= widget.transform_for_desktop(1200).url %>'>
+    <%= scrivito_image_tag widget, :image, {class: 'img-responsive'}, transform: widget.fallback_transform %>
+  </picture>
   <div class="carousel-caption">
     <div class="content">
       <%= scrivito_tag :div, widget, :panel_content %>

app/views/elastic_slider_widget/details.html.erb

@@ -5,4 +5,4 @@
 
   <h3>Panels</h3>
   <%= scrivito_tag :div, widget, :panels %>
-<% end %>
+<% end %>

lib/scrivito_elastic_slider_widget/version.rb

@@ -1,3 +1,3 @@
 module ScrivitoElasticSliderWidget
-  VERSION = "0.92.0"
+  VERSION = "0.92.1"
 end