Блог

У меня есть отзывчивое фоновое изображение с расположенным над ним изображением меньшего размера. Я пытаюсь сохранить изображение меньшего размера в определенном месте при изменении размера окна.

Оба изображения масштабируются правильно, и пока работает левое положение, но не верхнее положение.

 img {
max-width:100%;
}

#dot {
position: absolute;
top: 17%;
left: 66.5%;
width: 10%;
height: 0;
padding-bottom: 10%;
  

}

Я нашел несколько вопросов с ответами, которые предполагают:

Выравнивание по вертикали или позиционирование с помощью Javascript

Я также изучил .position() и .offset (), не уверен, что они будут работать.

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

Вот мой jsfiddle:

http://jsfiddle.net/melissadpelletier/xBu79/21/

Я не совсем уверен, что вы пытаетесь сделать со своими изображениями, но вы могли бы создать новое изображение меньшего размера (зеленая точка) с тем же соотношением сторон, что и фоновое изображение, и разместить точку там, где она должна быть в пределах этого соотношения сторон. Затем увеличьте ширину до 100%, и два изображения в основном будут перекрываться, но верхнее изображение (меньшее изображение) будет иметь прозрачный фон. Не уверен, что все это имеет смысл, но я создал новый образ и применил скрипку, в которой я новичок:http://jsfiddle.net/ydack /

 img 
{
width:100%;
}

#dot
{
    width: 100%;
    position: absolute;
    top:0;
    left:0;
}

#dotImg
{
    top: 0;
    left: 0;
    width: 100%;
}
  

Я ошибочно разместил положение зеленой точки на основе черного контура, а не полного фонового изображения, поэтому точка находится немного выше и правее того места, где она должна быть. НО это положение сохраняется при изменении размера окна. Халтурно, но это может сработать!

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

 var height = $('#image').height();
var width = $('#image').width();

/* change the fractions here according to your desired percentages */
$('#dot').css({left: width/2, top: height/2});

$(window).resize(function() {
    height = $('#image').height();
    width = $('#image').width();

    /* change the fractions here according to your desired percentages */
    $('#dot').css({left: width/2, top: height/2});
});
  

Попробуйте этот код:http://jsfiddle.net/LimitedWard/FFQt2/3 /

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

Редактировать: после дальнейшего изучения это можно сделать в CSS; однако это намного неаккуратнее, потому что точка не следует за изображением, если окно слишком широкое. Этот jQuery решает эту проблему, используя позиционирование на основе пикселей.

http://jsfiddle.net/sajrashid/xBu79/24/

множество ошибок, в основном не закрывающих теги

 <div id='background'>
  <img src='http://i.imgur.com/57fZEOt.png'/>
  <div id='dot'>
    <img src='http://i.imgur.com/yhngPvm.png'/>
  </div>
</div>