CODEWITHSUNDEEP
cssresponsive-design
Marc Casavant
Marc Casavant

Reputation: 299

Responsive device with image overlay

I'm looking to overlay an image of some content on top of an iPhone, that can scale responsively and fit/remain within the screen area of the device. I haven't been able to find a good tutorial on how I could accomplish this effect. Here is what I've tried so far...

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

However it scales weirdly, and kind of juts out on the left a little. Certainly not very appealing. Ideas?

Upvotes: 1

Views: 238

Answers (1)

Digzol
Digzol

Reputation: 323

May I suggest placing the wrapping image as background of the content image instead?

It might need some tweaking but I think it does the job.

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

Upvotes: 3

Related Questions