Адаптивное устройство с наложением изображения
Я планирую наложить изображение некоторого содержимого на верхнюю часть 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;
}
Однако это странно масштабируется, и немного выступает слева. Конечно, не очень привлекательно. Идеи?
1 ответ
Решение
Могу ли я предложить вместо этого оберточное изображение в качестве фона содержимого?
Это может потребовать некоторой настройки, но я думаю, что это делает работу.
<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;
}