Question

我希望在iPhone上叠加一些内容的图像，这些图像可以响应缩放并适合/保留在设备的屏幕区域内。我还没有找到一个关于如何实现这种效果的好教程。这是我到目前为止所尝试的......

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

具有图像叠加功能的响应设备

1 个答案: