Как сделать картинку background подстраиваемую под блок?

[perec200]

Добрый день? Как сделать, чтобы картинка в фоне выводилась полностью по высоте, по ширине она принимает значения блока родителя и прекрасно адаптируется, но как установить корреляцию по высоте от изменения ширины блока, т. к. при разных экранах блок в котором находится айфон изменяется.
Если обычной картинки прописать в html width="100%", то она в зависимости от ширины блока изменяется и по высоте.
https://jsfiddle.net/wjt96w2t/

[Shurikkan]

https://jsfiddle.net/wjt96w2t/1/

[perec200]

https://jsfiddle.net/wjt96w2t/1/

Если убрать слова из блока, то пропадает изображение https://jsfiddle.net/wjt96w2t/2/

[wwt]

фоновое изображение не является контентом и не может растягивать блок, я бы посоветовал вам использовать элемент <img> это будет правильнее.Ну или если совсем не в моготу использовать javascript как-то так https://jsfiddle.net/60k5sv4j/

 

Еще как вариант задать сразу высоту блоку и подстраивать фоновое изображение под высоту блока. https://jsfiddle.net/7sse78pc/

[perec200]

Еще как вариант задать сразу высоту блоку и подстраивать фоновое изображение под высоту блока. https://jsfiddle.net/7sse78pc/

Вот эта идею отличная! 

[perec200]

Как сделать, чтобы внутри экрана можно было сверстать какие-то элементы?

[wwt]

вставить внутрь блока preview_phone нужное содержимое и позиционировать его как надо

[perec200]

вставить внутрь блока preview_phone нужное содержимое и позиционировать его как надо

Непонятно, как при изменении ширины блока высчитывать ширину экрана смартфона, через % или js? 

И при попытке позиционирования сдвигаются все блоки.

https://jsfiddle.net/7sse78pc/1/

[Igor Schnaider]

С экраном телефона можно поступить так.

[Shurikkan]

С экраном телефона можно поступить так.

По-моему, немножечко не всё в порядке со значением атрибутов координат при позиционировании через calc.

Особенно при работе с "мобильными" браузерами.

 

Я думаю, что изначально неправильный подход. ТС, ты какую задачу то решает вообще? Что реализовать надо?

Edited March 17, 2016 by Shurikkan

[perec200]

 

С экраном телефона можно поступить так.

По-моему, немножечко не всё в порядке со значением атрибутов координат при позиционировании через calc.

Особенно при работе с "мобильными" браузерами.

 

Я думаю, что изначально неправильный подход. ТС, ты какую задачу то решает вообще? Что реализовать надо?

 

Есть сайт, где организатор может добавить своё мероприятие и чтобы показать, как его мероприятие будет отображаться в нашем приложении на телефоне было решено показывать смартфон слева и при заполнении полей, будет заполняться поля в самом приложении (эмулятор который на сайте).

Я решил реализовать следующим образом, но левый блок резина т. к. использую bootstrap, то есть стили в которые я не лезу и мне нужно, чтобы телефон подстраивался под ширину левого блока, верхняя и нижняя часть смартфона подстраиваются под блок, но левая и правая рамка нет. https://jsfiddle.net/yh54870L/