JavaFX如何实现ImageView图片裁剪填充并居中？

你需要为ImageView实现按宽高比缩放、宽度填满父容器、超出高度部分居中裁剪的效果，修改你的initialize方法代码如下：

import javafx.geometry.Pos;
import javafx.scene.shape.Rectangle;
import javafx.beans.value.ChangeListener;

// 类的其他代码保持不变
@FXML
private void initialize(){
    Experience experience = experienceRepository.findById(1);
    Image image = new Image(new ByteArrayInputStream(experience.getImages().get(0).getImageData()));
    imageViewPrincipal.setImage(image);
    // 保持图片原始宽高比，避免拉伸变形
    imageViewPrincipal.setPreserveRatio(true);
    // 图片默认居中对齐
    imageViewPrincipal.setAlignment(Pos.CENTER);

    // 监听父容器尺寸变化，动态调整图片缩放和裁剪逻辑
    ChangeListener<Number> paneSizeListener = (observable, oldValue, newValue) -> {
        double paneWidth = imagePane.getWidth();
        double paneHeight = imagePane.getHeight();
        if (paneWidth <= 0 || paneHeight <= 0) return;

        double imgOriginalWidth = image.getWidth();
        double imgOriginalHeight = image.getHeight();
        // 计算缩放比例，让图片宽度完全填满父容器
        double scaleFactor = paneWidth / imgOriginalWidth;
        double scaledImgHeight = imgOriginalHeight * scaleFactor;

        imageViewPrincipal.setFitWidth(paneWidth);
        imageViewPrincipal.setFitHeight(scaledImgHeight);

        // 缩放后高度超过父容器高度时，裁剪上下多余部分，保持图片居中
        if (scaledImgHeight > paneHeight) {
            Rectangle clipRect = new Rectangle(paneWidth, paneHeight);
            clipRect.setLayoutY((paneHeight - scaledImgHeight) / 2);
            imageViewPrincipal.setClip(clipRect);
        } else {
            // 高度不足时取消裁剪
            imageViewPrincipal.setClip(null);
        }
    };

    imagePane.widthProperty().addListener(paneSizeListener);
    imagePane.heightProperty().addListener(paneSizeListener);
}

你也可以直接在FXML中配置基础属性，减少Java代码量：

<ImageView fx:id="imageViewPrincipal" preserveRatio="true" alignment="CENTER" />

修改后图片会始终填满整个容器的宽度，上下超出的部分会均匀裁剪，不会出现拉伸变形也不会留空白区域。

内容的提问来源于stack exchange，提问作者Juan Cruz Carrau