Есть блок div.mapCollectives
с position:relative
и вложенный список ul.collectives>li
.
<div class="mapCollectives">
<img src="img/map.png" alt="">
<ul class="collectives">
<li>
<a href="#" class="decorItemText">
<p>Декоративно-прикладное творчество</p>
</a>
</li>
<li>
<a href="#" class="decorItemText">
<p>Этнографический фольклорный</p>
</a>
</li>
</ul>
</div>
У каждой li
задано position:absolute
. Через JS, при изменении размера окна браузера, каждому li
присваивается новый transform:scale
$(window).resize(function(){
var ww = $('.mapCollectives').width()*0.0008630;//Специальные коэффициенты
var hh = $('.mapCollectives').height()*0.0014545;//для расчёта пропорций li
$('.collectives li').css({
'transform': 'scale('+ww+', '+hh+')'
});
});
Проблема в том, что у li
заданы в стилях left
и top
, и при уменьшении окна эти значения тоже должны изменяться, чтобы li
сохраняло своё месторасположение (.mapCollectives>img
- карта с островами, а li
- указатели на конкретные острова).
Уменьшается блок .mapCollectives
- уменьшается картинка внутри. Уменьшаются указатели (должны указывать на "правильные" острова, то-есть left
и top
должны уменьшаться).
Пробовал задавать left
и top
в процентах, но не помогло. Пробовал transform(ww*N, hh*M)
, тоже не помогло. Думаю, тут должна быть какая-то хитрая формула расчёт координат li
в зависимости от размеров родительского окна.
Вся суть в двух скринах:
Указатель указывает на конкретную координату
Меняем размер экрана и указатель сдвигается
Размеры самого указателя меняются пропорционально экрану, но сам блок съезжает вниз и вправо, а нужно, чтобы он указывал на тот же самый остров, что и на первом скрине
Обновление
http://codepen.io/anon/pen/EPmdvO
$(document).ready(function() {
$(window).resize(function() {
var ww = $('.mapCollectives').width() * 0.0008630;
var hh = $('.mapCollectives').height() * 0.0014545;
console.log(ww);
console.log(hh);
sscale = $('.mapCollectives').width() / 1976;
$('.collectives li').css({
'transform': 'scale(' + ww + ', ' + hh + ')',
'top': ((212 - (300 * sscale)) * -5) / 8,
'left': ((95 - (220 * sscale)) * -1) / 0.7
});
});
$(window).resize();
});
main.container img {
padding: 0;
}
.mapCollectives {
max-width: 100%;
max-height: 100%;
position: relative;
}
.container img {
max-width: 100%;
}
.collectives li {
outline: 1px solid;
width: 221px;
text-align: center;
height: 253px;
position: absolute;
}
.collectives li:first-child {
background: url(http://5.firepic.org/5/images/2016-01/09/5p09s5ue4l0w.png) no-repeat center 8px, url(http://5.firepic.org/5/images/2016-01/09/zxmx6oq31mqu.png) no-repeat center;
left: 55px;
top: -19px;
}
.decorItemText {
position: relative;
height: 100%;
display: block;
}
.decorItemText p {
position: absolute;
bottom: 9px;
font: bold 15px/16px RobotoCondensed;
color: #FFF;
}
@media (min-width: 1770px) {
.col-lg-8 {
width: 65.8%;
}
}
@media (min-width: 1430px) {
main.container {
width: 67.2%;
}
}
@media (max-width: 1200px) {
main.container {
padding: 0px 14px;
width: 100%;
}
}
}
@media (min-width: 1200px) {
.col-lg-8 {
width: 59.2%;
}
}
}
@media (min-width: 992px) and (max-width: 1200px) {
.col-md-9 {
width:75% !important;
}
}
<main class="container col-lg-8 col-md-9 col-sm-12">
<div class="mapCollectives">
<img src="http://5.firepic.org/5/images/2016-01/09/2owys8ofkcby.png" alt="">
<ul class="collectives">
<li>
<a href="#" class="decorItemText">
<p>Декоративно-прикладное творчество
</p>
</a>
</li>
</ul>
</div>
</main>