Как поместить изображение в верхний левый угол элемента div и сохранить его там, если элемент div перемещается?

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

Недавно я переработал сценарий своего сайта, чтобы разместить его на Weebly. Вот одна из четырех страниц моего сайта, с которыми мне нужна помощь. Как вы можете видеть, изображения, появляющиеся при наведении миниатюры, абсолютно расположены. Для большинства компьютерных разрешений и / или браузеров изображение будет отображаться из указанного поля. Как я могу расположить их во внутреннем верхнем левом углу div? Или, еще лучше, горизонтально и вертикально по центру?

<section id="Sizes" style="float: left">
<a href="#Space">
<img class="Small" src="/files/theme/SampleD_Fun_Icon.png" width="150" height="150" alt="Sample 1: Day of Fun" />
<img class="Large" src="/files/theme/SampleD_Fun.png" width="150" height="150" alt="Sample 1: Day of Fun" />
</a>
...
</section>
<a id="Space"></a>
<span class="Popup">Hover over thumbnail to display sample artwork.</span>
<br style="clear: left" />

a:hover img.Small
{
    border: 5px solid #21568b;
    margin: 10px;
    text-decoration: none;
}
section#Sizes a img.Large
{
    border-width: 0;
    height: 0;
    left: 438px;
    position: absolute;
    top: 326px;
    width: 0;
}
section#Sizes a:hover img.Large
{
    height: 526px;
    left: 438px;
    position: absolute;
    top: 326px;
    width: 520px;
}
.Popup
{
    border: 3px solid;
    float: left;
    height: 272px;
    margin: 8px 20px 0px 0px;
    padding-top: 254px;
    text-align: center;
    width: 520px;
}

Спасибо за ваше время.:)

Источник

4 ответа

Решение

Весь ваш дизайн немного хрупок, и я бы не советовал строить его таким образом, но вы ищете практические ответы, так что вот небольшое изменение, которое я могу придумать, которое решает вашу проблему:

1) Добавьте это к вашей таблице стилей:

body { position: relative; }

2) В строке 40 вашего main_style.css измените top: 326px в top: 316px а также left: 438px в left: 428pxтак, чтобы это стало так:

section#Sizes a:hover img.Large {position: absolute; top: 316px; left: 428px; width: 520px; height: 526px;}

Как это работает?

Ваши изображения размещены с использованием абсолютного позиционирования. По умолчанию это работает относительно окна просмотра (окна). Но, повернув тело в положение относительно, оно становится содержащим блоком, а абсолютное положение относительно ближайшего предка содержащего блока.

Итак, теперь ваши изображения фиксируются внутри элемента body, а не фиксируются относительно окна. Так как поля элемента body изменяют размер при изменении размера окна, это делает различные части вашего контента фиксированными относительно друг друга. Затем вам просто нужно удалить 10px с верхней и левой стороны, так как это размер границы вашего элемента тела, и мы теперь измеряем изнутри границы.

Источник

Я вижу, вы уже используете jQuery, так почему бы не сделать что-то подобное?

$('.Small').on('mouseover', function(){
$('.Popup').empty().html($(yourtarget).attr('img' , 'src'));
});

$('.Small').on('mouseout', function(){
$('.Popup').empty().html('Hover over thumbnail to display sample artwork.');
});
Источник

TLDR: Вы не можете сделать это в чистом CSS.

Вы можете легко расположить изображение внутри контейнера div, если поместите элемент изображения внутри элемента div, а затем использовать абсолютное позиционирование, например top: 0; left: 0; (или рядом других методов). Но тогда вам понадобится JavaScript, чтобы соотнести скрытую миниатюру с всплывающим полноразмерным изображением.

В качестве альтернативы, вы можете разместить полноразмерное изображение в элементе миниатюр (как у вас сейчас), но тогда вам понадобится JavaScript, чтобы разместить полноразмерное всплывающее изображение внутри контейнера div.

Из двух альтернатив я рекомендую первый: поместите все всплывающие изображения в целевой контейнер и используйте JavaScript, чтобы показать или скрыть их при наведении миниатюры. Соотнесение миниатюры и полноразмерного изображения с помощью JavaScript будет проще, чем написание позиционного кода.

Источник

Просто потому, что все говорили, что это невозможно сделать с помощью чистого CSS, я хотел продемонстрировать, что это возможно, и это даже довольно легко. Посмотрите на следующий пример:

http://jsfiddle.net/aafa2zp5/

<div id='images-wrapper'>
    <ul>
        <li>
            <img class='small' src='http://placehold.it/50/ff0000'/>
            <img class='big' src='http://placehold.it/300/ff0000'/>
        </li>
        <!-- and some more similar thumb / image groups -->
    </ul>
    <div class='preview-area'></div>
</div>

CSS (или соответствующая часть по крайней мере)

#images-wrapper {
    position: relative;
}
.big {
    display: block;
    position: absolute;
    top: 54px;
    right: 54px;
    opacity: 0;
    transition: opacity .5s;
}  
.preview-area {
    width: 350px;
    height: 350px;
    border: 4px solid blue;
    position: absolute;
    top: 21px;
    right: 21px;
}
li:hover .big {
    opacity: 1;
}

Ключ заключается в том, чтобы установить положение относительно оболочки (и сохранить всех потомков в качестве статических по умолчанию). Затем вы можете использовать это для позиционирования области предварительного просмотра и больших изображений, устанавливая их в абсолютное положение и тщательно вычисляя правильное положение. Я даже добавил кросс-фэйд, просто потому, что это так просто, но вы также можете работать с блоком отображения / нет, если хотите.

Для небольших экранов вы можете изменить размеры и расположение в медиа-запросе, но это все же должно быть выполнимо (хотя в зависимости от состояния наведения, возможно, не лучшая идея для сенсорного устройства)

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

Источник
Другие вопросы по тегам