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类

img{
    max-width: 100%;
}

导致变形和无法裁剪

如果其他人犯了这个错误就张贴这个。

Answer 2

与UI Kit有同样的问题。添加：

.cropImgWrapper img{
    max-width: none;
}

到croppic css文件解决了问题