具有圖像覆蓋的響應式設備

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