Fix: Maintain aspect ratio for the Campaign Cover Image block

src/Campaigns/Blocks/CampaignCover/edit.tsx

@@ -92,15 +92,13 @@ export default function Edit({attributes, setAttributes, toggleSelection}: EditP
                                 className={'givewp-campaign-cover-block-preview__image'}
                                 src={campaign?.image}
                                 alt={attributes.alt ?? __('Campaign Image', 'give')}
-                                style={{width: '100%', height: '100%'}}
                             />
                         </ResizableBox>
                     ) : (
                         <img
                             className={'givewp-campaign-cover-block-preview__image'}
                             src={campaign?.image}
                             alt={attributes.alt ?? __('Campaign Image', 'give')}
-                            style={{width: '100%', height: '100%'}}
                         />
                     ))}
             </CampaignSelector>

src/Campaigns/Blocks/CampaignCover/render.php

@@ -3,14 +3,14 @@
 use Give\Campaigns\Models\Campaign;
 use Give\Campaigns\Repositories\CampaignRepository;
 
-if ( ! isset($attributes['campaignId'])) {
+if (!isset($attributes['campaignId'])) {
     return;
 }
 
 /** @var Campaign $campaign */
 $campaign = give(CampaignRepository::class)->getById($attributes['campaignId']);
 
-if ( ! $campaign) {
+if (!$campaign) {
     return;
 }
 
@@ -21,11 +21,11 @@
 
 // Only assign width and height if the alignment is NOT "full" or "wide"
 if ($attributes['align'] !== 'full' && $attributes['align'] !== 'wide') {
-    $width = isset($attributes['width']) ? $attributes['width'] : '100%';
-    $height = isset($attributes['height']) ? $attributes['height'] : '100%';
+    $widthStyle = isset($attributes['width']) ? "width: {$attributes['width']}px;" : '';
+    $heightStyle = isset($attributes['height']) ? "max-height: {$attributes['height']}px;" : '';
 } else {
-    $width = 'auto';
-    $height = 'auto';
+    $widthStyle = 'width: auto;';
+    $heightStyle = 'height: auto;';
 }
 ?>
 
@@ -35,8 +35,8 @@
         src="<?php echo esc_url($campaign->image); ?>"
         alt="<?php echo esc_attr($altText); ?>"
         style="
-            width:<?php echo $width ?>px;
-            height: <?php echo $height ?>px;
+        <?php echo esc_attr($widthStyle) ?>
+        <?php echo esc_attr($heightStyle) ?>
             border-radius: 8px;"
     />
 </figure>