时间戳

首页 > 解决方案 > Filepond gridlayout与图像调整大小冲突

javascript - Filepond gridlayout与图像调整大小冲突

问题描述

现在我正在使用文件池，我想缩放照片以填充目标尺寸，除非它们都是各种尺寸，这就是我添加图像调整大小功能的原因。它的图像调整大小功能有效。但是，当我使用网格布局并排显示图片时，图像调整大小功能不起作用。

  .filepond--root {
    max-width:30em;
}
.filepond--item {
    width: calc(50% - 0.5em);
}
body {
    padding: 2em;
}

img {
    margin: 1em 2em 0 0;
    border-radius: .25em;
    box-shadow: 0 .125em .5em rgba(0,0,0,0.25);
}
<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
<link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet">

<input type="file"
       class="filepond"
       accept="image/*"
       name="filepond"
       multiple
       data-max-file-size="3MB"
       data-max-files="6"/>

<script src="https://unpkg.com/filepond-plugin-image-resize/dist/filepond-plugin-image-resize.js"></script>
<script src="https://unpkg.com/filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.js"></script>
<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>
<script>
    
    FilePond.registerPlugin(
        FilePondPluginImageResize,
        FilePondPluginFileValidateType,
        FilePondPluginImagePreview
    );

    const inputElement = document.querySelector('input[type="file"]');
    const pond = FilePond.create(inputElement, {
        imageCropAspectRatio: 1,
        imageResizeTargetWidth: 256,
        imageResizeMode: 'contain'
    });

</script>

在此处输入图像描述

在此处输入图像描述

标签： javascripthtmlcssfilepond

解决方案

.filepond--root {
    max-width:20em;
}

.filepond--item {
    width: calc(50% - 0.5em);
}

body {
    padding: 2em;
}

img {
    margin: 1em 2em 0 0;
    border-radius: .25em;
    box-shadow: 0 .125em .5em rgba(0,0,0,.25);
}
<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
<link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet">

<input type="file" 
       accept="image/*"
       class="filepond"
       name="filepond"
       multiple
       data-max-file-size="2MB"
       data-max-files="6"/>

<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>
<script src="https://unpkg.com/filepond-plugin-image-resize/dist/filepond-plugin-image-resize.js"></script>
<script src="https://unpkg.com/filepond-plugin-image-crop/dist/filepond-plugin-image-crop.js"></script>
<script src="https://unpkg.com/filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.js"></script>
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>
<script>
    
    FilePond.registerPlugin(
        FilePondPluginImageCrop,
        FilePondPluginImagePreview,
        FilePondPluginImageResize,
        FilePondPluginFileValidateType
    );

    const inputElement = document.querySelector('input[type="file"]');
    const pond = FilePond.create(inputElement, {
        imageCropAspectRatio: 1,
        imageResizeTargetWidth: 256,
        imageResizeMode: 'contain',
        onaddfile: (err, fileItem) => {
            console.log(err, fileItem.getMetadata('resize'));
        },
        onpreparefile: (fileItem, outputFiles) => {
            outputFiles.forEach(output => {
                const img = new Image();
                img.src = URL.createObjectURL(output.file);
                document.body.appendChild(img);
            })
        }
    });
</script>

推荐阅读