如何使图像适合另一个图像的大小（拖动）

Question

如何让一张图像进入另一张图像。如果从容器图像中移出则不可见。

Example here

Answer 1

像this?

这样的东西

HTML：

<div class="imgWrap">
    <img class="img1" src="http://cf.mp-cdn.net/a5/15/54eb476ff1a5f20f69942605df14-was-the-bombing-of-hiroshima-and-nagasaki-justified.jpg" />
    <img class="img2" src="http://t0.gstatic.com/images?q=tbn:ANd9GcTG4mTuuZmylqn_qqviXFh5EPLD_DTsXMIjXT-4XJM0QPtJxw7lXw&t=1" />
</div>

CSS：

.imgWrap {
    position: relative;
    overflow: hidden;
}
.img1, .img2 {
    position: absolute;
    opacity: 0.5;
    width: 100%;
}

JS：

//Finds the smallest height
var height = $(".img1").height();
if ($(".img2").height() < height) height = $(".img2").height();

//Finds the smallest width
var width = $(".img1").width();
if ($(".img2").width() < width) width = $(".img2").width();

//Sets height and width of image
$(".imgWrap").css({"height":height,"width":width});