Добавить <DIV> к картинке

352
21 декабря 2016, 03:20

Здравствуйте. Подскажите, пожалуйста, как решить данную задачу:

1) Есть изображение.jpg с нарисованными кнопками

2) Нужно сделать это изображение фоном HTML документа, а на месте каждой нарисованной кнопки повесить DIV с особым позиционирование, которое не будет сбиваться при изменении размера изображения.

Т.е. как сделать так, чтобы изображение стало резиновым (адаптивным) и добавленные DIV элементы не разъезжались при изменении размера картинки?

Answer 1

Предлагаю изначально вычислить все пропорции картинки, т.е вычисляем сколько в процентах отдалена кнопка снизу, справа/слева и её ширину/высоту. Теперь при изменении ширины картинка будет уменьшаться, а вместе с ней и кнопки

.background { 
  position:absolute; 
  left:0; 
  top:0; 
  right:0; 
  left:0; 
  z-index: -1; 
} 
.background .image {display:inline-block;position:relative;width:100%;} 
.background .image img {display:inline-block;width:100%;pointer-events: none;} 
.background .image .button { 
    position: absolute; 
    background-color: transparent; 
    bottom: 12%; 
    width: 37.8%; 
    height: 13.8%; 
    border-radius: 10px; 
    cursor: pointer; 
} 
.background .image .button.b0 {left: 6.9%;} 
.background .image .button.b1 {right: 7.9%;}
<div class="background"> 
  <div class="image"> 
    <img src="https://i.stack.imgur.com/z24fy.jpg"> 
    <div class="button b0"></div> 
    <div class="button b1"></div> 
  </div> 
</div>

READ ALSO
Как ограничить кол-во прохождений теста?
HTML

Как ограничить кол-во прохождений теста?

 349
Выборочная компиляция *.pug в html
HTML

Выборочная компиляция *.pug в html

Как указать pug компилировать только indexpug в index

 817
Как вывести двухмерный массив в таблицу
HTML

Как вывести двухмерный массив в таблицу

Имеется полученный из БД массив, с неизвестным количеством строк

 400
Как вернуться к нужной позиции на странице при нажатии кнопки Назад?
HTML

Как вернуться к нужной позиции на странице при нажатии кнопки Назад?

Всем привет! Мучает вопрос, не смог найти на него ответ самУ меня есть страница каталога с товарами, написал небольшой скриптик, чтобы отображались...

 433