Question

问题：当我调整父图像的大小时，我也希望子格式调整大小，但具有正确的比例和位置。因此无论我如何调整图像大小，儿童div都将始终覆盖图像的这一部分，这部分是在开始时覆盖的。

HTML

<div class="container">
    <div class="cover"></div>
    <img src=" http://s3.amazonaws.com/crunchbase_prod_assets/assets/images/original/0002/8857/28857v1.gif" alt="" width="400px" height="300px" id="res">
</div>

CSS：

.container {
    position: relative;
}

.cover {
    position: absolute;
    width: 286px;
    height: 133px;
    left: 107px;
    top: 38px;    background: yellow;
    z-index: 99999;
}

JS：

$( "#res" ).resizable({ alsoResize: ".cover"});

Jsfiddle - http://jsfiddle.net/MKtWq/1/

有什么想法吗？

感谢。

Answer 1

这可能会有所帮助：http://jsfiddle.net/MKtWq/79/

HTML：

<div class="container">
<div class="cover"><img src="http://s0.uploads.im/aLNwR.png" width=100% height=100%/></div>

<img src=" http://s3.amazonaws.com/crunchbase_prod_assets/assets/images/original/0002/8857/28857v1.gif" alt="" width="400" height="300" id="res">

JS：

$( ".cover" ).resizable({ alsoResize: "#res"});

CSS：

.container {
    position: relative;
}

.cover {
    position: absolute;
    left:0%;
    width: 400px;
    height: 300px;
    z-index: 99999;
}

可调整大小的元素与绝对位置

1 个答案: