fix: preserve responsive image proportions

src/components/PageReader.test.tsx

@@ -59,6 +59,9 @@ const page: OneNotePageDto = {
       id: 'image-1',
       resourceId: 'resource-image',
       altText: 'Embedded diagram',
+      pictureWidth: 8,
+      pictureHeight: 4,
+      href: 'https://example.com/diagram',
       isBackground: false,
       layout: {},
     },
@@ -141,6 +144,13 @@ describe('PageReader structured content', () => {
         screen.getByRole('img', { name: 'Embedded diagram' })
       ).toHaveAttribute('src', 'blob:local-image')
     );
+    expect(screen.getByRole('img', { name: 'Embedded diagram' })).toHaveStyle({
+      width: '384px',
+      height: 'auto',
+    });
+    expect(
+      screen.getByRole('link', { name: 'Embedded diagram' })
+    ).toHaveAttribute('href', 'https://example.com/diagram');
   });
 
   it('downloads an attachment only after an explicit user action', async () => {

src/components/PageReader.tsx

@@ -400,7 +400,9 @@ function ImageView({
         alt={image.altText ?? image.filename ?? ''}
         style={{
           width: halfInches(image.pictureWidth),
-          height: halfInches(image.pictureHeight),
+          // A fixed height would remain unchanged when max-width scales a
+          // large image down, distorting its aspect ratio.
+          height: 'auto',
         }}
       />
     ) : (

src/styles.css

@@ -333,6 +333,8 @@ p {
 
 .page-reader {
   min-width: 0;
+  min-height: 0;
+  overflow: auto;
   padding: clamp(1.4rem, 4vw, 3rem);
   background: #fff;
 }
@@ -453,9 +455,15 @@ p {
   display: block;
   max-width: 100%;
   height: auto;
+  object-fit: contain;
   border-radius: 0.3rem;
 }
 
+.onenote-image > a {
+  display: block;
+  max-width: 100%;
+}
+
 .onenote-image figcaption {
   max-width: 40rem;
   color: #716675;

src/version.ts

@@ -1 +1 @@
-export const APP_VERSION = '0.2.0';
+export const APP_VERSION = '0.2.1';