Как исправить положение изображения относительно другого изображения с другими размерами экрана - PullRequest
Новая
       0

Как исправить положение изображения относительно другого изображения с другими размерами экрана

5 голосов
/ 19 сентября 2011

Я пишу приложение для веб-сайта / iPad (используя PhoneGap ), где у меня есть 1024x768 изображений в режиме слайд-шоу. Я хотел бы разместить другое изображение, например значок «Домой» поверх изображений 1024x768, в том же положении, независимо от размера экрана (например, экран ПК с высоким / низким разрешением или дисплей планшета 1024x768). Я пробовал абсолют, но положение меняется на разных дисплеях, и это не та позиция, которую я изначально установил в CS 5.

Ответы [ 4 ]

5 голосов
/ 19 сентября 2011

Аналогично другим ответам, но если вы предпочитаете не определять ширину и высоту, вы можете использовать float:

http://jsfiddle.net/RprTY/

<div>
    <img src="http://placekitten.com/300/300">    
    <img src="http://placekitten.com/30/30" id="smallone">
</div>

CSS: 

div{
    float: left;
    position: relative;
}

img{
     vertical-align: bottom;   
}

#smallone{
    top: 0;
    left:0;
    position:absolute;   
}

Если родительский контейнер установлен на position: relative или position: absolute, то абсолютно позиционированное изображение должно располагаться относительно левого верхнего угла родительского контейнера.Это должно быть полностью независимо от разрешения экрана.

1 голос
/ 31 июля 2013

Я попробовал предложенное здесь решение, но оно не сработало.У меня в основном та же проблема: два изображения внутри ползунка, одно из которых позиционируется абсолютно с процентными значениями (поэтому, когда я изменяю ширину области просмотра, она прокручивается вбок).Другое изображение должно двигаться вместе с первым, статически расположенным относительно последнего.

Дело в том, что в моем случае изображения не являются потомками одного и того же родительского div.Я настроил пример кода Fiddle, с которым я сейчас работаю.

http://jsfiddle.net/36QPG/1/

<div class="image">
    <img id="back" src="http://placekitten.com/300/300" />
</div>
<div class="slide">
    <div class="image">
        <img id="front" src="http://www.lionsclublagardiecastelnau.com/data/images/images-sites/images/icone-android.png"></img>
    </div>
</div>

Стоит отметить, что я не могу изменить настройку HTML-кода.

Я уже некоторое время борюсь с этой проблемой, но я не смог ее разгадать.Надеюсь, я достаточно ясно дал понять.

Заранее спасибо.

1 голос
/ 19 сентября 2011

Поместите ваше изображение 1024x768 в div того же размера.Включите значок вашего дома в этом разделе.Задайте относительное положение div, а положение значка home - абсолютное, и он будет абсолютно расположен внутри родительского div.

0 голосов
/ 19 сентября 2011

HTML: 

<div id="bottom">
    <div id="top"></div>
</div>

CSS: 

#bottom{ 
    background: url(*bottom-image-url*); 
    position: relative; 
    width: *??*; 
    height: *??*;}
#top{ 
    background: url(*top-image-url*); 
    position: absolute; 
    width: *??*; 
    height: *??*; 
    left: *??*; 
    right: *??*;}
...