diff --git a/docs/src/content/docs/tests/shared-syntax.md b/docs/src/content/docs/tests/shared-syntax.md
index 48e3563..bc18d86 100644
--- a/docs/src/content/docs/tests/shared-syntax.md
+++ b/docs/src/content/docs/tests/shared-syntax.md
@@ -16,6 +16,10 @@ An image using Markdown syntax with no alt text:
![](../../../assets/tests/starlight-light.png)
+A remote SVG image with no explicit width using Markdown syntax:
+
+![D2 diagram](https://d2.atlas.lucas.tools/?script=KkktLuECBAAA__8%3D&)
+
An image using HTML syntax with the `img` tag:
diff --git a/docs/src/content/docs/tests/shared-syntax.mdx b/docs/src/content/docs/tests/shared-syntax.mdx
index eb6798d..e7f3793 100644
--- a/docs/src/content/docs/tests/shared-syntax.mdx
+++ b/docs/src/content/docs/tests/shared-syntax.mdx
@@ -16,6 +16,10 @@ An image using Markdown syntax with no alt text:
![](../../../assets/tests/starlight-light.png)
+A remote SVG image with no explicit width using Markdown syntax:
+
+![D2 diagram](https://d2.atlas.lucas.tools/?script=KkktLuECBAAA__8%3D&)
+
An image using HTML syntax with the `img` tag:
diff --git a/packages/starlight-image-zoom/components/ImageZoom.astro b/packages/starlight-image-zoom/components/ImageZoom.astro
index 5066bbe..ecb864d 100644
--- a/packages/starlight-image-zoom/components/ImageZoom.astro
+++ b/packages/starlight-image-zoom/components/ImageZoom.astro
@@ -37,6 +37,7 @@ import config from 'virtual:starlight-image-zoom-config'
starlight-image-zoom-zoomable {
display: inline-block;
position: relative;
+ width: 100%;
}
starlight-image-zoom-zoomable img {
@@ -64,13 +65,18 @@ import config from 'virtual:starlight-image-zoom-config'
border-radius: 50%;
display: grid;
height: 44px;
- inset: 20px 20px auto auto;
+ inset: 20px auto auto 20px;
+ margin-top: 0 !important;
padding: 10px;
place-items: center;
position: absolute;
width: 44px;
}
+ .starlight-image-zoom-opened .starlight-image-zoom-control {
+ inset: 20px 20px auto auto;
+ }
+
.starlight-image-zoom-source {
visibility: hidden;
}
diff --git a/packages/starlight-image-zoom/tests/shared-syntax.test.ts b/packages/starlight-image-zoom/tests/shared-syntax.test.ts
index 2da8441..07978f5 100644
--- a/packages/starlight-image-zoom/tests/shared-syntax.test.ts
+++ b/packages/starlight-image-zoom/tests/shared-syntax.test.ts
@@ -41,7 +41,7 @@ for (const format of formats) {
await testPage.page.emulateMedia({ colorScheme: 'light' })
await testPage.goto(slug)
- const image = testPage.getNthImage(4)
+ const image = testPage.getNthImage(5)
await testPage.zoomImage(image)
expect(await testPage.getZoomedImage().getAttribute('src')).toMatch(/-dark.png$/)
@@ -55,4 +55,13 @@ for (const format of formats) {
expect(await testPage.getZoomedImage().getAttribute('src')).toMatch(/-light.png$/)
})
+
+ test(`${format}: displays remote SVGs with no explicit width`, async ({ testPage }) => {
+ await testPage.goto(slug)
+
+ const image = testPage.getNthImage(3)
+ const boundingBox = await image.boundingBox()
+
+ expect(boundingBox?.width).not.toBe(0)
+ })
}