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

Question

我有 html 这样的：

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

我希望完成两件事：

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

但是，我不知道如何让 <img> 保持它的完整宽度/高度，而不是被它的容器缩小

Answer 1

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

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

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

Example fiddle

Answer 2

如果你想让图像不超过边界（避免白色 space），这是典型的缩放功能，你可以这样做 (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;
}

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

Image beyond bounds of container and clipping mask

css

jquery

jquery-ui