From fafaa6c2ae26acec5e3e0844e61f8f9c7df2db5d Mon Sep 17 00:00:00 2001
From: Marcelo Amorim <mamorim813@gmail.com>
Date: Sat, 12 Oct 2024 02:27:47 -0300
Subject: [PATCH] Feat: Add control for questionPic size (#68)

- The image size can now be customized or dynamically adjusted as per requirements.
- Introduced  and  props to allow manual size control.
---
 src/lib/Core.jsx   | 12 +++++++++++-
 src/lib/styles.css |  5 +++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/lib/Core.jsx b/src/lib/Core.jsx
index ddd145c..b9929db 100644
--- a/src/lib/Core.jsx
+++ b/src/lib/Core.jsx
@@ -437,7 +437,17 @@ function Core({
                 )}
               />
               {activeQuestion && activeQuestion.questionPic && (
-                <img src={activeQuestion.questionPic} alt="question" />
+                <div className="active-question-pic-container">
+                  <img
+                    src={activeQuestion.questionPic}
+                    alt="question"
+                    style={{
+                      height: activeQuestion.questionPicHeight ?? 'auto',
+                      width: activeQuestion.questionPicWidth ?? 'auto',
+                      maxWidth: '100%',
+                    }}
+                  />
+                </div>
               )}
               {activeQuestion
                 && renderTags(
diff --git a/src/lib/styles.css b/src/lib/styles.css
index 442ccb3..68127fb 100644
--- a/src/lib/styles.css
+++ b/src/lib/styles.css
@@ -58,6 +58,11 @@
   font-size: 30px;
 }
 
+.react-quiz-container .active-question-pic-container {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+}
 
 .react-quiz-container .questionModal .alert {
   padding: 20px;