Update digitaldesign-research.md

Author: splimon

projects/digitaldesign-research.md

@@ -22,24 +22,24 @@ Two instructional websites on Python programming fundamentals were developed usi
 
 <div style="display: flex; justify-content: space-around; align-items: center; margin: 20px 0;">
   <div style="display: flex; flex-direction: column; align-items: center;">
-    <img src="/img/website-1.gif" alt="Website 1 Gif" style="width: 300px; height: 200px; object-fit: cover;">
+    <img src="/img/website-1.gif" alt="Website 1 Gif" style="max-width: 300px; height: auto;">
     <p style="text-align: center;"><em>Scrollable Website format</em></p>
   </div>
 
   <div style="display: flex; flex-direction: column; align-items: center;">
-    <img src="/img/website-1-heatmap.png" alt="Website 1 Heatmap" style="width: 300px; height: 200px; object-fit: cover;">
+    <img src="/img/website-1-heatmap.png" alt="Website 1 Heatmap" style="max-width: 300px; height: auto;">
     <p style="text-align: center;"><em>Scrollable Website heatmap</em></p>
   </div>
 </div>
 
 <div style="display: flex; justify-content: space-around; align-items: center; margin: 20px 0;">
   <div style="display: flex; flex-direction: column; align-items: center;">
-    <img src="/img/website-2.gif" alt="Website 2 Gif" style="width: 300px; height: 200px; object-fit: cover;">
+    <img src="/img/website-2.gif" alt="Website 2 Gif" style="max-width: 300px; height: auto;">
     <p style="text-align: center;"><em>Multi-paged Website format</em></p>
   </div>
 
   <div style="display: flex; flex-direction: column; align-items: center;">
-    <img src="/img/website-2-heatmap.png" alt="Website 2 Heatmap" style="width: 300px; height: 200px; object-fit: cover;">
+    <img src="/img/website-2-heatmap.png" alt="Website 2 Heatmap" style="max-width: 300px; height: auto;">
     <p style="text-align: center;"><em>Multi-paged Website heatmap</em></p>
   </div>
 </div>