Как сделать изображение под размер другого изображения (перетаскивание)

Question

Как я могу сделать одно изображение внутри другого изображения. И если из контейнера выходит изображение, то его не видно.

Пример здесь

Answer 1

Как то так ?

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});