позиционирования изображения

Question

Таким образом, я пытаюсь сделать что-то вроде этого:

Веб-страница должна выглядеть телефонному приложение, и он должен быть отзывчивым. Проблема в том, что я не могу правильно позиционировать кнопки. Они всегда перемещаются по отношению к «планшету», когда я переустанавливаю окно браузера. Это то, что я пробовал (только с одной кнопкой):

CSS

img { 
max-width: 100%; 
} 
#tabletBG { 
width : 60%; 
} 
#buttons{ 
position:absolute; 
width:10%; 
left:40%; 
top:12%; 
} 

HTML

<div id="content"> 
    <div id="tablet"> 
     <img id="tabletBG" src="images/tablet.png" alt="tabletBG"></img> 
     <div id="buttons"> 
      <img id="quienes" src="images/quienes.png" alt="quienes"></img> 
     </div> 
    </div> 

</div> 

Я просто хочу кнопки придерживаться планшета. Даже если я изменил размер окна браузера. Есть ли более простой способ сделать это? Благодарю.

Answer 1

Что касается исходного вопроса выше:

Попробуйте поставить position вашего content дел до absolute, fixed или relative.

Это гарантирует, что ваши абсолютно позиционированные buttons ДИВ, содержащиеся в нем будет использовать это в качестве точки отсчета, а не касаясь его изменения размера/перемещение к окну.

DEMO: http://jsbin.com/tixed/1/

Что касается Вашего комментария ниже:

Он работает, но для такой степени. Есть вопрос, что если вы продолжаете расширять окно браузера, планшет будет продолжать расширяться, но кнопка не будет. Вот link.

Проблема есть, что изображение только 96 пикселей в ширину, и вы установили правило CSS для всех img элементов, чтобы иметь max-width: 100%. В этих условиях изображение будет расширяться только до точки его первоначального размера (действие по умолчанию, а не то, что вы хотите), и только до точки его содержащего элемента (по вашему правилу CSS и без заметного эффекта).

Чтобы исправить, в идеале вы получите увеличенное изображение. Для быстрого исправления измените его правило просто width: 100%. Это гарантирует, что изображение всегда будет расширяться до точки его содержащего элемента.

Answer 2

Да, при изменении размера вашего браузера изображения изменят свое выравнивание, и это поведение браузеров по умолчанию. Только вы можете сделать это изображение плавающим.

Попробуйте это:

img{ 
    float: left; 
}