feat!: constrain the image to the component's max height

README.md

@@ -127,6 +127,14 @@ ImageCrop imageCrop = new ImageCrop(DownloadHandler.forClassResource(getClass(),
 add(imageCrop);
 ```
 
+* Constrain the size of large images
+
+The image is scaled down, keeping its aspect ratio, to fit the component's `max-height`. Only absolute and viewport units (such as `px` or `vh`) are supported: percentages, a `height` set on the component, and sizes given by the layout do not limit the image.
+
+```java
+imageCrop.getStyle().set("max-height", "70vh");
+```
+
 * Get cropped image 
 
 ```java

src/main/java/com/flowingcode/vaadin/addons/imagecrop/ImageCrop.java

@@ -37,7 +37,21 @@
  * <a href="https://www.npmjs.com/package/react-image-crop">react-image-crop</a>
  * library.
  * This component allows users to define and manipulate crop areas on images.
- * 
+ *
+ * <p>
+ * The image is scaled down, keeping its aspect ratio, to fit the available width
+ * and the component's {@code max-height}. For instance,
+ * {@code getStyle().set("max-height", "100vh")} keeps a large image within the
+ * viewport. Images smaller than these limits are shown at their natural size.
+ * </p>
+ *
+ * <p>
+ * Only {@code max-height} values in absolute or viewport units (such as {@code px} or
+ * {@code vh}) are supported. Percentages (including {@code calc()} expressions that
+ * contain them), a {@code height} set on the component, and sizes given by the layout
+ * do not limit the image.
+ * </p>
+ *
  * @author Paola De Bartolo / Flowing Code
  */
 @NpmPackage(value = "react-image-crop", version = "11.0.6")
@@ -46,8 +60,6 @@
 @CssImport("react-image-crop/dist/ReactCrop.css")
 @CssImport("./styles/image-crop-styles.css")
 public class ImageCrop extends ReactAdapterComponent {
-
-  private static final String IMG_FULL_HEIGHT_CLASS_NAME = "img-full-height";
 
   private static final String IMG_SRC_RESOURCE_ATTRIBUTE = "img-src";
 
@@ -505,21 +517,6 @@ public String getCroppedImageDataUri() {
     return croppedImageRevision == imageRevision ? this.croppedImageDataUri : null;
   }
 
-  /**
-   * Sets the image to occupy the full viewport height when enabled.
-   * If {@code fullHeight} is {@code true}, applies a CSS class that
-   * sets the image height to 100vh. If {@code false}, removes the class
-   * to revert to the default height.
-   *
-   * @param fullHeight whether the image should fill the viewport height
-   */
-  public void setImageFullHeight(Boolean fullHeight) {
-    if (fullHeight)
-      this.addClassName(IMG_FULL_HEIGHT_CLASS_NAME);
-    else
-      this.removeClassName(IMG_FULL_HEIGHT_CLASS_NAME);
-  }
-
   /**
    * Decodes the cropped image data URI and returns it as a byte array. If the image data URI is not
    * in the format "data:image/*;base64,", it will be decoded assuming it is a Base64 encoded

src/main/resources/META-INF/frontend/styles/image-crop-styles.css

@@ -18,6 +18,13 @@
  * #L%
  */
 
-.img-full-height img {
-    height: 100vh;
+image-crop {
+    display: inline-block;
+    max-width: 100%;
+}
+
+/* Propagate the component's max-height to the image (react-image-crop
+   applies max-height: inherit to its wrapper and to the image). */
+image-crop .ReactCrop {
+    max-height: inherit;
 }

src/test/java/com/flowingcode/vaadin/addons/imagecrop/UploadImageCropDemo.java

@@ -106,6 +106,8 @@ private void openCropDialog(ByteArrayOutputStream outputStream, String mimeType)
     imageCrop.setCircularCrop(true);
     imageCrop.setCrop(new Crop("%", 25, 25, 50, 50)); // centered crop
     imageCrop.setKeepSelection(true);
+    // keep large images within the dialog
+    imageCrop.getStyle().set("max-height", "70vh");
 
     cropButton.addClickListener(event -> {
       // there is no cropped image until the image is loaded and an area is selected