изображение за пределы контейнера и обтравочной маски

Question

У меня есть HTML как это:

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

Я ищу, чтобы выполнить две вещи:

1. В настоящее время у меня есть JQuery, который заполнит <img> SRC , используя диалог загрузки файлов по умолчанию. Однако, независимо от размера изображения, я бы хотел, чтобы он отображался в его полной ширине/высоте (над границами его контейнера) и имел контейнер, установленный в overflow: hidden.

2. Использование jQueryUI, сделать изображение перетаскивать внутри контейнера, и продолжают быть обрезан/маскируется это контейнер

Однако, я не могу понять, как сделать <img> сохранить это полная ширина/height, и не уменьшаться его контейнером

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; 
}