image - JSF のスケーリング オーバーレイを使用したサイズ変更可能な画像

Question

JSF (primefaces) を使用して画像を描画し、その画像にオーバーレイ (四角形) を描画したいと考えています。画像はサイズ変更可能である必要がありますが、画像の比率を維持する必要があり、オーバーレイもスケーリングする必要があります。

私は試した：

<pe:layout id="fullPage" options="#{myManagedBean.layoutOptions}" fullPage="true" widgetVar="fpLayoutWidget">

        <pe:layoutPane position="west" resizeWhileDragging="true" closable="false" resizable="true"
            styleContent="overflow: auto;">

            <!-- canvas id="imagecanvasid" style="border: red solid; width: 100%; height: auto; overflow: hidden; margin: 0 !important; padding: 0 !important;" /-->
            <div id="imageContainer" style="max-height: 100%;">
                <p:graphicImage id="imageid" value="#{myManagedBean.image}" style="max-height: 100%; max-width: 100%; position: absolute;" />
            </div>

            <pe:imageAreaSelect id="areaSelect" for="imageid" handles="false" show="false" hide="true"  
                autoHide="true" movable="false" persistent="false" resizable="false">  
                <p:ajax event="selectEnd" listener="#{myManagedBean.selectCoords}" />  
            </pe:imageAreaSelect>  

    </pe:layoutPane>

div が機能しているため、オーバーレイのスケーリングを取得できません。画像サイズが変わったときにリスナーを登録してdivのサイズを変更しようとしましたが、divが更新されるときに遅延があります。どんなアイデアでも大歓迎です。