diff --git a/docs/src/components/mdx/DoDont.css.ts b/docs/src/components/mdx/DoDont.css.ts
index c00f634ee..c4dc91382 100644
--- a/docs/src/components/mdx/DoDont.css.ts
+++ b/docs/src/components/mdx/DoDont.css.ts
@@ -1,5 +1,5 @@
 import { classNames, vars } from "@seed-design/design-token";
-import { style } from "@vanilla-extract/css";
+import { globalStyle, style } from "@vanilla-extract/css";
 
 import * as m from "../../styles/media.css";
 import * as u from "../../styles/utils.css";
@@ -29,6 +29,15 @@ export const dontCard = style([
   },
 ]);
 
+globalStyle(`${doCard} > img`, {
+  width: "100%",
+  height: "100%",
+});
+globalStyle(`${dontCard} > img`, {
+  width: "100%",
+  height: "100%",
+});
+
 const icon = style([
   u.flexCenter,
   {