0

我有这个问题要解决好几个星期了,真的需要帮助。

我有这个系统,用户选择具有 2 种区域类型的模板。一种用于插入图像,一种用于插入文本。
每个模板可能带有许多插入图像的区域,每个图像区域只是一个 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+ 按钮删除

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>

查询

$('.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

更新
此代码可以执行我想要的操作,但我的问题是每次调整大小时都会返回到我在初始化中定义的内容:

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

4

1 回答 1

0

每次发生变化时,您都可以使用 .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());
}
于 2013-09-13T15:58:24.797 回答