У меня сложный вопрос: У меня есть полный профиль на сайте, над которым я работаю. Теперь я хочу привязать div к определенной позиции на изображении, а также, что div масштабируется так же, как и мое фоновое изображение с свойством "background-size: cover". Поэтому в этом примере у меня есть изображение города, которое охватывает окно браузера, и я хочу, чтобы мой div накладывал одно конкретное здание независимо от размера окна.
Мне уже удалось заставить div придерживаться одной позиции, но не могу изменить размер. Что я сделал до сих пор:
http://codepen.io/EmmieBln/pen/YqWaYZ
var imageWidth = 1920,
imageHeight = 1368,
imageAspectRatio = imageWidth / imageHeight,
$window = $(window);
var hotSpots = [{
'x': -160,
'y': -20,
'height': 400,
'width': 300
}];
function appendHotSpots() {
for (var i = 0; i < hotSpots.length; i++) {
var $hotSpot = $('<div>').addClass('hot-spot');
$('.container').append($hotSpot);
}
positionHotSpots();
}
function positionHotSpots() {
var windowWidth = $window.width(),
windowHeight = $window.height(),
windowAspectRatio = windowWidth / windowHeight,
$hotSpot = $('.hot-spot');
$hotSpot.each(function(index) {
var xPos = hotSpots[index]['x'],
yPos = hotSpots[index]['y'],
xSize = hotSpots[index]['width'],
ySize = hotSpots[index]['height'],
desiredLeft = 0,
desiredTop = 0;
if (windowAspectRatio > imageAspectRatio) {
yPos = (yPos / imageHeight) * 100;
xPos = (xPos / imageWidth) * 100;
xSize = (xSize / imageWidth) * 1000;
ySize = (ySize / imageHeight) * 1000;
} else {
yPos = ((yPos / (windowAspectRatio / imageAspectRatio)) / imageHeight) * 100;
xPos = ((xPos / (windowAspectRatio / imageAspectRatio)) / imageWidth) * 100;
}
$(this).css({
'margin-top': yPos + '%',
'margin-left': xPos + '%',
'width': xSize + 'px',
'height': ySize + 'px'
});
});
}
appendHotSpots();
$(window).resize(positionHotSpots);
Моя идея: Если (imageWidth/windowWidth) < 1 затем установите значение для var Scale = (windowWidth/imageWidth) else var Scale (windowHeight/imageHeight) и использовать шкалу var Scale for transform: scale (Scale, Scale) но я не смог справиться с этой работой...
Возможно, вы, ребята, могли мне помочь...
