0

私はこの問題を数週間解決する必要があり、本当に助けが必要です.

ユーザーが2種類の領域を持つテンプレートを選択するこのシステムがあります。1 つは画像の挿入用で、もう 1 つはテキストの挿入用です。
各テンプレートには、画像を挿入するための多数の領域が含まれる場合があり、各画像領域は、800px から 650px の限られた領域内に独自の寸法 [幅 px - 高さ px] を持つ単なる div です。

この div を呼び出して画像を受け取りますdiv.img

その中にdiv.imgjquery.form.jsinput type="file"プラグインを投げて、新しい画像を挿入することができます。

挿入した画像を呼び出します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>

Jクエリ

$('.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が inner と同じ寸法を持つ方法です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());
}

これがそれぞれに1回だけ発生する方法はありdiv.imghますか?

4

1 に答える 1