Question

我现在要解决这个问题好几周了，真的需要帮助。

我有这个系统，用户选择具有2种区域的模板。一个用于插入图像，一个用于插入文本每个模板可能有许多区域来插入图像，每个图像区域只是一个div，它有自己的尺寸[宽度px - 高度px]，在800px - 650px的有限区域内。

我会将此div称为接收图片div.img

在div.img内部input type="file"并抛出jquery.form.js插件，我可以在其中插入新图像。

我将调用插入的图片new.img

此new.img包含在div div.newImg中，因为我必须有一个按钮才能删除图像顶部的图像。

我正在使用jquery ui draggable和resizable，因此可以调整div.newImg的大小并将其拖动到div.img内。

以下是不同的元素：div.img - ＆gt; div.newImg - ＆gt; new.img +按钮删除

HTML

<div class="child" style="z-index: 70; position: absolute; top: 0px; left: 0px; width: 800px; height: 172px; cursor: default; background-color: rgba(254, 202, 64, 0.701961);" alt="reset">
   <div class="imgh ui-resizable ui-draggable" alt="reset3" style="height: 100%; width: 204px;">
      <img src="###" style="width:inherit; height:inherit;  min-width:50px; min-height:50px;" class="img_set">
      <div class="close"><i class="icon-remove-sign"></i></div>
   </div>
</div>

JQUERY

$('.imgh').resizable({ containment: $(this).closest('.child') });
$('.imgh').draggable({ containment: $(this).closest('.child'), scroll: true, snap: true, snapTolerance: 5 });

到目前为止，我已经设法接近这一点，但根本没有帮助我

if($('.child').width() > $('.child').height()){
    $('.imgh').height('100%');
    $('.imgh').width($('.imgh img').width());
}else{
    $('.imgh').width('100%');
    $('.imgh').height($('.imgh img').height());
}

通过img.img_set，我设法使style="width:inherit; height:inherit;"具有与其父级相同的维度。

我需要的是div.imgh与内部img.img_set具有相同尺寸的方法。像反转inherit。

UPDATE
这段代码做了我想要的，但我的问题是每次调整大小时都会回到我在初始化中定义的内容：

if($('.child').width() > $('.child').height()){
    $('.imgh').height('100%');
    $('.imgh').width('auto');
}else{
    $('.imgh').width('100%');
    $('.imgh').height('auto');
}
if($('.imgh').width() > $('.imgh img').width()){
    $('.imgh').width($('.imgh img').width());
}

有没有办法让每个div.imgh只发生一次？

Answer 1

每次发生变化时，你都可以使用.bind（）调整它的大小......

$('.imgh').bind('resize', FullWidthHeight); //Note: check the 'resize' event is relevant to imgh

function FullWidthHeight() {
    $('.imgh').css('height', img.img_set.height());
    $('.imgh').css('width', img.img_set.width());
}

Jquery有一个父div具有与它的子元素相同的宽度和高度

1 个答案: