diff --git a/packages/blocks/Image/ImageBlock.css b/packages/blocks/Image/ImageBlock.css
new file mode 100644
index 00000000000..cf290bc7999
--- /dev/null
+++ b/packages/blocks/Image/ImageBlock.css
@@ -0,0 +1,56 @@
+/* Image block */
+
+.block.image {
+  clear: both;
+}
+
+.block.image.align.left img {
+  max-width: 50%;
+  margin-right: 1em !important;
+  margin-bottom: 1em;
+  float: left;
+}
+
+.block.image.align.right img {
+  max-width: 50%;
+  margin-bottom: 1em;
+  margin-left: 1em !important;
+  float: right;
+}
+
+.block.image.align.center {
+  text-align: center;
+}
+
+.block.image.align.center img {
+  max-width: 100%;
+  margin-inline: auto;
+}
+
+.block.image.align.center img.medium {
+  max-width: 50%;
+}
+
+.block.image.align.center img.small {
+  max-width: 25%;
+}
+
+.block.image.align.left img.large,
+.block.image.align.right img.large {
+  max-width: 50%;
+}
+
+.block.image.align.left img.medium,
+.block.image.align.right img.medium {
+  max-width: 25%;
+}
+
+.block.image.align.left img.small,
+.block.image.align.right img.small {
+  max-width: 15%;
+}
+
+.block.image img.full-width {
+  width: 100%;
+  max-width: 100%;
+}
diff --git a/packages/blocks/Image/ImageBlockEdit.tsx b/packages/blocks/Image/ImageBlockEdit.tsx
index 557c537c633..3ed63950aa7 100644
--- a/packages/blocks/Image/ImageBlockEdit.tsx
+++ b/packages/blocks/Image/ImageBlockEdit.tsx
@@ -6,9 +6,11 @@ import type {
   Content,
   RelatedItem,
 } from '@plone/types';
+
 import Image from '@plone/layout/components/Image/Image';
 import clsx from 'clsx';
 import config from '@plone/registry';
+import './ImageBlock.css';
 
 function flattenToAppUrl(url: string) {
   const apiPath = config.settings.apiPath || '';
@@ -66,11 +68,11 @@ const ImageBlockEdit = (props: BlockEditProps) => {
     : undefined;
 
   return (
-    <div
+    <figure
       className={clsx(
         'image align block',
         {
-          center: !Boolean(data.align),
+          center: !data.align,
         },
         data.align,
       )}
@@ -105,7 +107,7 @@ const ImageBlockEdit = (props: BlockEditProps) => {
           objectBrowserPickerType="image"
         />
       ) : null}
-    </div>
+    </figure>
   );
 };
 
diff --git a/packages/blocks/Image/ImageBlockView.tsx b/packages/blocks/Image/ImageBlockView.tsx
index 448d3019b01..a9c033d1f92 100644
--- a/packages/blocks/Image/ImageBlockView.tsx
+++ b/packages/blocks/Image/ImageBlockView.tsx
@@ -1,8 +1,12 @@
 import type { BlockViewProps, ContainedItem } from '@plone/types';
 import Image from '@plone/layout/components/Image/Image';
+import clsx from 'clsx';
+
+import './ImageBlock.css';
 
 const ImageBlockView = (props: BlockViewProps) => {
   const { data } = props;
+
   if (!data.url) return null;
 
   const item = {
@@ -12,8 +16,22 @@ const ImageBlockView = (props: BlockViewProps) => {
   } as ContainedItem;
 
   return (
-    <figure>
+    <figure
+      className={clsx(
+        'image align block',
+        {
+          center: !data.align,
+        },
+        data.align,
+      )}
+    >
       <Image
+        className={clsx({
+          'full-width': data.align === 'full',
+          large: data.size === 'l',
+          medium: data.size === 'm',
+          small: data.size === 's',
+        })}
         item={item}
         alt={(data.alt as string) || ''}
         imageField={data.image_field as string}