Адаптивное устройство с наложением изображения

Question

Я планирую наложить изображение некоторого содержимого на верхнюю часть iPhone, которое может быстро масштабироваться и помещаться / оставаться в пределах области экрана устройства. Я не смог найти хороший учебник о том, как я могу достичь этого эффекта. Вот что я пробовал до сих пор...

http://jsfiddle.net/mcasavant/VLBAE/1/

<div class="large-5 columns">
<img src="http://www.ikonet.com/en/visuelmobile/images/iphone4.png" alt="" />
<img class="inner" src="http://old.mobilecrunch.com/wp-content/uploads/2010/01/iphone-4-os.jpg" alt="" />

 .large-5 {
    width: 80%;
    position: relative;
}

img {
    max-width: 100%;
}

.columns:first-child {
    float: left;
}

.inner {
    position: absolute;
    top: 17%;
    left: 1.3%;
    padding: 0 12%;
    max-width: 76%;
}

.columns {
    padding-left: 15px;
    padding-right: 15px;
}

Однако это странно масштабируется, и немного выступает слева. Конечно, не очень привлекательно. Идеи?

Answer 1

Могу ли я предложить вместо этого оберточное изображение в качестве фона содержимого?

Это может потребовать некоторой настройки, но я думаю, что это делает работу.

http://jsfiddle.net/xC446/7/

<div class="wrapper">
    <img src="http://old.mobilecrunch.com/wp-content/uploads/2010/01/iphone-4-os.jpg" alt="" />
</div>

.wrapper { width:200px}

img {
    background-image : url('http://www.ikonet.com/en/visuelmobile/images/iphone4.png');
    background-repeat : no-repeat;
    background-size : 100% 100%;
    width : 100%;
    height : auto;
    padding : 35.5% 7% 46% 8%;
    box-sizing :border-box;
    -moz-box-sizing:border-box;
}