Croppic.net 图片尺寸错误，无法裁剪

Question

我正在使用 croppic.net 使用户能够在上传之前执行简单的图像裁剪。问题是裁剪容器内的图像总是变形。

因此，我无法正确裁剪图像，也无法将图像向右拖动以从那里裁剪部分。即使放大，图像的 x 宽度始终与容器的宽度保持相同。

我正在使用的css：

#croppicContainer{
    width: 300px;
    height: 300px;
    position: relative;
}

Html（使用粉底）：

<div class="row">
    <div class="large-4 columns">
        <div id="croppicContainer"></div>
    </div>
</div>

以及预加载图像并应初始化裁剪的 Js:

var cropperOptions = {
    cropUrl: 'path_to_your_image_cropping_file.php',
    loadPicture: '../../img/provider-logos/5000_logo.jpg'
};

var cropperHeader = new Croppic('croppicContainer', cropperOptions);

croppic.js 被加载并且我的 javascript 在页面末尾内联；所以那里应该没有问题。

Answer 1

我现在觉得自己很傻。问题是 Zurb Foundation 的使用，它有一个 css class

img{
    max-width: 100%;
}

导致变形无法裁剪

如果其他人犯了这个错误，只需发布这个。

Answer 2

与 UI 工具包有同样的问题。添加：

.cropImgWrapper img{
    max-width: none;
}

croppic css 文件解决了问题

Croppic.net 图片尺寸错误，无法裁剪

Croppic.net wrong image dimensions and not able to crop

html

javascript

css

jquery

croppic