позиция <a>ссылка поверх <img>с отзывчивым поведением

Question

В моем приложении React я хочу разместить несколько ссылок через <a> поверх изображения <img>. По сути, это не проблема, однако, когда вы изменяете размер окна (например, на другом устройстве), он по-разному масштабирует положение ссылки и изображения.

Я создал скрипку , чтобы показать поведение . Если изменить масштаб окна справа, можно увидеть, что ссылка не «приклеена» к изображению. Как мне этого добиться?

У меня есть этот функциональный компонент (как показано на скрипке):

<div class="parentDiv">

    <div className={styles.imgWrapper}>
        <img 
            className={styles.imgResponsive} 
            src="https://cdn.pixabay.com/photo/2018/02/08/22/27/flower- 
            3140492__480.jpg" 
        />
        <div class="divLink">
            <a href="some_url">Some link</a>
        </div>
    </div>
</div>

и этот css: С его помощью вы можете перемещать ссылку по изображение, но оно не приклеено к изображению.

.parentDiv {
    height: 70vh;
    width: 100vw;
}

.imgResponsive {
    position:relative;
    height: 100%;
    width:auto;
    top: 0;
    left: 0;
}

.divLink {
    position: absolute;
    top: 20%;
    left: 20%;
}

Как добиться желаемого поведения? Большое спасибо!

Answer 1

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

Настройка width должна быть достаточной, но для сохранения вы можете добавить height: auto или наоборот, определить height и добавить width: auto

Для текстовую ссылку, возможно, лучше было бы центрировать ее, используя left: 50%; top: 50%; transform: translate(-50%, -50%);. Это будет лучше работать с отзывчивостью. Вы также можете указать меньший font-size в медиа-запросе.

ADDITION (после более внимательного изучения предоставленной вами скрипки):

1.) У вас есть слой div между parentDiv и самим изображением: .imgWrapper DIV. Для этого вам нужны настройки CSS: сделайте его такого же размера, как parentWrapper, добавив следующее:

.imgWrapper {
  height: 100%;
  width: 100%;
}

Таким образом, настройка изображения height: 100% может быть связана с настройкой 70vh height .parentDiv.

2.) В скрипте нет reactJS, поэтому вам нужно записать классы в коде HTML как обычные атрибуты HTML, например <img class="imgResponsive" src="https://cdn.pixabay.com/photo/2018/02/08/22/27/flower-3140492__480.jpg" />

Результат: https://jsfiddle.net/9fqohL2m/1/

Answer 2

Небольшие исправления, поскольку стиль браузера по умолчанию создает проблемы с полями:

* {
    margin:0;
    padding:0;
    margin-block-start:0;
    margin-block-end:0;
}
.parentDiv {
    height: 70vh;
    width: 100vw;
}

.imgResponsive {
    position:relative;
    width:100%;
    top: 0;
    left: 0;
}

.divLink {
    position: absolute;
    top: 20vw;
    left: 20vw;
}

* {} применяет стиль ко всем объектам с низким приоритетом.
если у вас все еще есть проблемы, вы можете принять посмотрите на код, который я использовал для размещения маркеров на карте здесь
Надеюсь, на этот раз он сработает

Answer 3

вам нужно изменить размер изображения со страницей или использовать пиксели: если вы хотите, чтобы изображение изменялось с окном:

.parentDiv {
    height: 70vh;
    width: 100vw;
}

.imgResponsive {
    position:relative;
    width:100%;
    top: 0;
    left: 0;
}

.divLink {
    position: absolute;
    top: 20%;
    left: 20%;
}

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

.parentDiv {
    height: 70vh;
    width: 100vw;
}

.imgResponsive {
    position:relative;
    top: 0;
    left: 0;
}

.divLink {
    position: absolute;
    top: 96px;
    left: 96px; /*adjust the values to move the link*/
}

надеюсь, что это поможет