Наложение ссылок на изображение, позволяющее изменить его размер

Question

Наложение ссылок на изображение, позволяющее изменить его размер

0

Я пытаюсь наложить некоторые ссылки на изображение. Эти ссылки запускают popover редактируемые поля, но это не имеет значения.

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

В настоящий момент я прокладываю вещи так:

<div style="position: relative;">
    <!-- the image fill the div for the sake of this example assume img is 1000px square -->
    <img src="bigimg.png">

    <!-- a number of divs like this create links over the image
    <div style="left: 500px; top: 500px; position:absolute;">

        <a style="display:block; width:397px; height:27px;" class="editable editable-click editable-empty">Link Name</a>

    </div>

</div>

Лучше всего было бы автоматически регулировать положение div, если изображение имеет размер, наложенный на него, или настроен на заполнение отдельного размера div.

Например. Я заставляю изображение быть размером 500x500 вместо 1000x1000. Мне понадобится div, чтобы отрегулировать его положение до 250x250 и отрегулировать его ширину/высоту.

Ben Ford 31 дек. 2013, в 15:09

Источник

0

Вы можете использовать функцию jquery и write (onload resize), эта функция будет создавать и добавлять позицию (новую) при изменении размера окна в браузере. Вы можете использовать медиа-запросы в CSS, если ваша идея не продвинулась.
mcmac 31 дек. 2013, в 14:25

Теги:

html

css

css3

image

layout

2 ответа

0

Пока вы не устанавливаете div для отображения: block; вы его ширина должна автоматически доходить до его ширины содержимого. Если вы хотите быть в безопасности, вы можете установить ширину: auto;

BryanB 31 дек. 2013, в 14:45

0

По умолчанию div - это display: block который позволяет ему расширяться, заполняя все пространство.
brouxhaha 31 дек. 2013, в 22:19

Ещё вопросы

Вы можете использовать функцию jquery и write (onload resize), эта функция будет создавать и добавлять позицию (новую) при изменении размера окна в браузере. Вы можете использовать медиа-запросы в CSS, если ваша идея не продвинулась.
По умолчанию div - это display: block который позволяет ему расширяться, заполняя все пространство.

Dpeif · Accepted Answer · 2013-12-31T16-20-00.000Z

Просто для того, чтобы расширить комментарий от @mcmac, это быстрая и грязная функция jquery, которая находит размеры вашей обертки, а затем устанавливает ее дочернее изображение в одинаковые размеры. Затем он использует те же размеры, чтобы полностью позиционировать ссылку внутри обертки над изображением.

function resizeImg() {
var container = $('.container'), // this wraps the image and link
    containerH = container.height(),
    containerW = container.width(),
    image = $('.container img'),
    link = $('.link');

image.height(containerH) // set image height to container height
     .width(containerW), // set image width to container width

link.css('left', containerW/2) // move link halfway from left edge of container
    .css('top', containerH/2); // and halfway from top of container
}

$(resizeImg)

Здесь HTML, который я использовал:

<div class="container">
    <img src="http://upload.wikimedia.org/wikipedia/commons/e/ec/Happy_smiley_face.png" />
    <div class="link">
        <a href="http://google.com">Link</a>
    </div>
</div>

Вы хотите, чтобы эта функция выполнялась не только на готовом документе (так как у меня есть здесь с сокращением $(resizeImg)), но также и при изменении размера. Если вы разрешите пользователям вручную изменять размер контейнера изображений, просмотрите свойство CSSize resize и посмотрите, как это работает для вас.

Здесь скрипка, вы можете экспериментировать, изменяя размеры .container в CSS и нажать "запустить", чтобы увидеть самое ссылку репозиции соответственно.

Следует отметить две вещи:

Вы можете уточнить математику о том, как вы перемещаете ссылку. Например, чтобы центрировать ссылку на пару координат (а не только на ее верхний левый угол), вам нужно будет вычесть 1/2 высоты и 1/2 ширины от ее координат. Это все зависит от вас и того, как вы их привязываете визуально. Для координирования, отличного от "центра", вам нужно будет указать свойства top и left ссылок в CSS, затем найти их в jQuery и сделать еще одну математику, например, если ссылка top:42 и контейнер сжимается на 1/3 его высота, установить top:14, разделив 42/3 и т.д.
Существует множество способов сделать эту установку. Я бы предложил использовать изображение как свойство background-image обертки, а не элемент <img> DOM. Это может устранить некоторые проблемы с интервалом, которые у вас есть, или конфликты между вашими свойствами display которые могут произойти в будущем. В таких средах, как jQueryUI и Bootstrap, возможно, есть некоторые из того, что вы ищете по умолчанию, поэтому дайте им взглянуть и посмотреть, что они предлагают.