Создание процентных высот для divs в контейнере с шириной 100%

Question

Я создаю веб-сайт, состоящий из изображения с определенными областями, которые являются ссылками. Я хочу, чтобы изображение было width: 100%, а height было auto, чтобы сохранить соотношение сторон.

Все места на изображении, которые я хочу быть ссылками, также будут масштабироваться, поэтому я думал о создании divs с процентными полями для создания областей с масштабированием. Это работает на ширину divs,

Проблема в том, что элементы height не имеют достаточного контроля и, похоже, не соответствуют высоте, установленной мною.

Есть ли у кого-нибудь представление о том, как сделать эту работу, или предложить лучший способ достичь этого?

Спасибо!

Answer 1

Есть несколько способов, о которых я могу думать. Тот, который не нуждается в дополнительной разметке, должен был поставить position: relative на #bigbox. Затем вы можете поместить маленькие прямоугольники абсолютно с верхним и нижним значениями, а не по высоте.

CSS:

img{ 
    width: 100%; 
    z-index: -1;  
} 

div#bigbox { 
    width: 100%; 
    margin: 0 auto; 
    margin-left: 0; 
    position: relative; 
} 

div#smallbox1 { 
    left: 11%; 
    top: 20%; 
    width: 20%; 
    bottom: 23%; 
    position:absolute; 
    background-color: red; 
} 

div#smallbox2 { 
    margin-left: 40%; 
    top: 20%; 
    width:20%; 
    bottom: 23%; 
    position: absolute; 
    background-color: green; 
} 

Обновление вашей jsbin здесь: jsbin.com/oqojef/2/edit