diff --git a/web/src/components/camera/CameraImage.tsx b/web/src/components/camera/CameraImage.tsx
index b2bf33dfd..0d320819a 100644
--- a/web/src/components/camera/CameraImage.tsx
+++ b/web/src/components/camera/CameraImage.tsx
@@ -1,5 +1,5 @@
 import { useApiHost } from "@/api";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import useSWR from "swr";
 import ActivityIndicator from "../indicators/activity-indicator";
 import { useResizeObserver } from "@/hooks/resize-observer";
@@ -27,18 +27,29 @@ export default function CameraImage({
   const enabled = config ? config.cameras[camera].enabled : "True";
   const [isPortraitImage, setIsPortraitImage] = useState(false);
 
+  const [{ width: containerWidth, height: containerHeight }] =
+    useResizeObserver(containerRef);
+
+  const requestHeight = useMemo(() => {
+    if (!config || containerHeight == 0) {
+      return 360;
+    }
+
+    return Math.min(
+      config.cameras[camera].detect.height,
+      Math.round(containerHeight * 1.1),
+    );
+  }, [config, camera, containerHeight]);
+
   useEffect(() => {
     if (!config || !imgRef.current) {
       return;
     }
 
-    imgRef.current.src = `${apiHost}api/${name}/latest.jpg${
-      searchParams ? `?${searchParams}` : ""
+    imgRef.current.src = `${apiHost}api/${name}/latest.jpg?h=${requestHeight}${
+      searchParams ? `&${searchParams}` : ""
     }`;
-  }, [apiHost, name, imgRef, searchParams, config]);
-
-  const [{ width: containerWidth, height: containerHeight }] =
-    useResizeObserver(containerRef);
+  }, [apiHost, name, imgRef, searchParams, requestHeight, config]);
 
   return (
     <div className={className} ref={containerRef}>