diff --git a/openlp/core/display/html/display.js b/openlp/core/display/html/display.js
index c7e252da4..1e3688325 100644
--- a/openlp/core/display/html/display.js
+++ b/openlp/core/display/html/display.js
@@ -654,7 +654,7 @@ var Display = {
section.setAttribute("style", "height: 100%; width: 100%;");
var img = document.createElement('img');
img.src = slide.path;
- img.setAttribute("style", "max-width: 100%; max-height: 100%; margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);");
+ img.setAttribute("style", "width: 100%; height: 100%; margin: 0; object-fit: contain;");
section.appendChild(img);
parentSection.appendChild(section);
Display._slides[index.toString()] = index;
diff --git a/tests/js/test_display.js b/tests/js/test_display.js
index 83177c6e5..06b02c746 100644
--- a/tests/js/test_display.js
+++ b/tests/js/test_display.js
@@ -772,9 +772,9 @@ describe("Display.setImageSlides", function () {
expect($(".slides > section > section").length).toEqual(2);
expect($(".slides > section > section > img").length).toEqual(2);
expect($(".slides > section > section > img")[0].getAttribute("src")).toEqual("file:///openlp1.jpg")
- expect($(".slides > section > section > img")[0].getAttribute("style")).toEqual("max-width: 100%; max-height: 100%; margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);")
+ expect($(".slides > section > section > img")[0].getAttribute("style")).toEqual("width: 100%; height: 100%; margin: 0; object-fit: contain;")
expect($(".slides > section > section > img")[1].getAttribute("src")).toEqual("file:///openlp2.jpg")
- expect($(".slides > section > section > img")[1].getAttribute("style")).toEqual("max-width: 100%; max-height: 100%; margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);")
+ expect($(".slides > section > section > img")[1].getAttribute("style")).toEqual("width: 100%; height: 100%; margin: 0; object-fit: contain;")
expect(Reveal.sync).toHaveBeenCalledTimes(1);
});
});