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

Question

这个问题我已经解决了好几个星期了，真的需要帮助。

我有这个系统，用户可以在其中选择具有两种类型区域的模板。一种用于插入图像，一种用于插入文本。
每个模板可能带有多个区域来插入图像，每个图像区域只是一个 div，在 800px - 650px 的有限区域内具有自己的尺寸 [width px - height px]。

我会调用这个div来接收图片div.img

在那个 div.img 里面有一个 input type="file" 并抛出 jquery.form.js 插件，我可以在其中插入一个新图像。

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

这个 new.img 包裹在一个 div div.newImg 中，因为我必须有一个按钮来删除图像本身顶部的图像。

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

这里是不同的元素:div.img -> div.newImg -> new.img + button delete

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

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

我需要的是让 div.imgh 具有与其内部 img.img_set 相同的尺寸的方法。就像一个颠倒的 inherit。

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

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