diff --git a/examples/webpage/app.js b/examples/webpage/app.js
index 693397d..f8bcfd8 100644
--- a/examples/webpage/app.js
+++ b/examples/webpage/app.js
@@ -27,10 +27,12 @@ const CAMERA_DONE_TEXT = "【拍摄完成】";
 // Sample images shown as thumbnails under the camera preview. Same-origin files
 // so they can be drawn to a canvas (for base64 + dimensions) without tainting.
 const SAMPLE_IMAGES = [
-  { src: "./samples/front-damage.jpg", label: "车辆前部" },
-  { src: "./samples/plate.jpg", label: "车牌" },
-  { src: "./samples/license.jpg", label: "驾驶证" },
-  { src: "./samples/scene.jpg", label: "事故现场" },
+  { src: "./samples/damage1.png", label: "车辆前部" },
+  { src: "./samples/damage2.png", label: "车辆后部" },
+  { src: "./samples/plate1.jpg", label: "车牌 1" },
+  { src: "./samples/plate2.jpg", label: "车牌 2" },
+  { src: "./samples/user1.jpg", label: "人物 1" },
+  { src: "./samples/user2.jpg", label: "人物 2" },
 ];
 // Cap the longer edge before JPEG-encoding so payloads stay small.
 const IMAGE_MAX_DIM = 1280;
diff --git a/examples/webpage/samples/damage1.png b/examples/webpage/samples/damage1.png
new file mode 100644
index 0000000..df3b550
Binary files /dev/null and b/examples/webpage/samples/damage1.png differ
diff --git a/examples/webpage/samples/damage2.png b/examples/webpage/samples/damage2.png
new file mode 100644
index 0000000..4bb9893
Binary files /dev/null and b/examples/webpage/samples/damage2.png differ
diff --git a/examples/webpage/samples/front-damage.jpg b/examples/webpage/samples/front-damage.jpg
deleted file mode 100644
index 87910d5..0000000
Binary files a/examples/webpage/samples/front-damage.jpg and /dev/null differ
diff --git a/examples/webpage/samples/license.jpg b/examples/webpage/samples/license.jpg
deleted file mode 100644
index 41a3cfb..0000000
Binary files a/examples/webpage/samples/license.jpg and /dev/null differ
diff --git a/examples/webpage/samples/plate.jpg b/examples/webpage/samples/plate.jpg
deleted file mode 100644
index a816df8..0000000
Binary files a/examples/webpage/samples/plate.jpg and /dev/null differ
diff --git a/examples/webpage/samples/plate1.jpg b/examples/webpage/samples/plate1.jpg
new file mode 100644
index 0000000..77a8b29
Binary files /dev/null and b/examples/webpage/samples/plate1.jpg differ
diff --git a/examples/webpage/samples/plate2.jpg b/examples/webpage/samples/plate2.jpg
new file mode 100644
index 0000000..61f1043
Binary files /dev/null and b/examples/webpage/samples/plate2.jpg differ
diff --git a/examples/webpage/samples/scene.jpg b/examples/webpage/samples/scene.jpg
deleted file mode 100644
index 5f3dd0b..0000000
Binary files a/examples/webpage/samples/scene.jpg and /dev/null differ
diff --git a/examples/webpage/samples/user1.jpg b/examples/webpage/samples/user1.jpg
new file mode 100644
index 0000000..c39bb9e
Binary files /dev/null and b/examples/webpage/samples/user1.jpg differ
diff --git a/examples/webpage/samples/user2.jpg b/examples/webpage/samples/user2.jpg
new file mode 100644
index 0000000..a9f932a
Binary files /dev/null and b/examples/webpage/samples/user2.jpg differ
diff --git a/examples/webpage/styles.css b/examples/webpage/styles.css
index 803eea1..75d0f1e 100644
--- a/examples/webpage/styles.css
+++ b/examples/webpage/styles.css
@@ -160,6 +160,10 @@ body {
   z-index: 1;
 }
 
+.camera-drawer__photo {
+  object-fit: contain;
+}
+
 .camera-drawer__preview.is-camera .camera-drawer__video {
   display: block;
 }
@@ -338,7 +342,7 @@ body {
 .camera-drawer__sample img {
   width: 100%;
   height: 100%;
-  object-fit: cover;
+  object-fit: contain;
   display: block;
 }