From 504f397a9a22aa80291d73a4f32bfea5de905154 Mon Sep 17 00:00:00 2001
From: p11 <Krapohl.f@gmx.de>
Date: Fri, 18 Apr 2025 21:32:44 +0200
Subject: [PATCH] Fixed cutting off of background in images

---
 src/vn.rs | 33 ++++++++++++++++++---------------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/src/vn.rs b/src/vn.rs
index 1ab4e25..634cf38 100644
--- a/src/vn.rs
+++ b/src/vn.rs
@@ -13,19 +13,19 @@ use crate::dialog::parse_map;
 
 fn render_scene(settings: &PlayerSettings, name: &str, output: &mut Vec<u8>) {
     for object in &settings.objects.objects {
-        let Some(image_set) = object.image.get(name) else {
-            continue;
-        };
+        if let Some(image_set) = object.image.get(name) {
+            for image in &settings.images.images[image_set] {
+                let Some(image) = image.get_ref(name) else {
+                    continue;
+                };
 
-        for image in &settings.images.images[image_set] {
-            let Some(image) = image.get_ref(name) else {
-                continue;
-            };
-
-            let _ = writeln!(
-                output,
-                "<img src={image:?} style='max-height: 100%; max-width: 100%; object-fit: cover'/>"
-            );
+                let _ = write!(
+                    output,
+                    r#"<div style="position:relative; height:100%; width:100%; overflow:hidden">
+                        <img src={image:?} style="height:100%; width:auto; object-fit:contain; position:absolute; left:50%; transform:translateX(-50%)">
+                        </div>"#,
+                );
+            }
         }
     }
 }
@@ -236,6 +236,7 @@ pub fn render_novel(
                         width: 100%;
                         height: 100%;
                         position: relative;
+                        overflow: hidden;
                     }
 
                     .scene-section {
@@ -245,6 +246,7 @@ pub fn render_novel(
                         width: 100%;
                         height: 100%;
                         display: none;
+                        aspect-ratio: 16/9;
                     }
 
                     .scene-section[style*='block'] {
@@ -254,12 +256,13 @@ pub fn render_novel(
                     }
 
                     .scene-section img {
-                        width: 100%;
                         height: 100%;
-                        object-fit: cover;
+                        width: auto;
+                        object-fit: contain;
                         position: absolute;
                         top: 0;
-                        left: 0;
+                        left: 50%;
+                        transform: translateX(-50%);
                     }
 
                     .textbox-content {