Question

我有这样的HTML：

<div class='image-container'>
    <img src='path/to/image.png' />
</div>

我希望完成两件事：

目前，我使用jQuery填充<img> src，使用默认的文件上传对话框。但是，无论图像的大小如何，我都希望它以全宽/高度（在其容器的边界上）显示，并将容器设置为overflow: hidden。
使用jQueryUI，使图像在容器内可拖动，并继续被其容器剪裁/遮罩

但是，我无法弄清楚如何让<img>保留它的全宽/高度，而不是按照它的容器按比例缩小

Answer 1

如果在包含div上设置高度/宽度，则img元素将保留其自身的尺寸。试试这个：

.image-container {
    width: 300px;
    height: 300px;
    overflow: hidden;
    position: relative;
}

$('.image-container img').draggable();

Example fiddle

Answer 2

如果您希望图像不会超过缩放功能的常量（避免空白区域），则可以执行此操作（fiddle）：

$('.image-container img').draggable({
    drag: function (event, ui) {
        if (ui.position.top > 0) {
            ui.position.top = 0;
        }
        var topMax = ui.helper.parent().height() - ui.helper.height();
        if (ui.position.top < topMax) {
            ui.position.top = topMax;
        }
        if (ui.position.left > 0) {
            ui.position.left = 0;
        }
        var leftMax = ui.helper.parent().width() - ui.helper.width();
        if (ui.position.left < leftMax) {
            ui.position.left = leftMax;
        }
    }
});

CSS：

.image-container {
    display: block;
    width: 380px;
    height: 380px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
}

超出容器和剪贴膜边界的图像

2 个答案: