html - 将 链接置于 上，具有响应行为

Question

在我的 React 应用程序中，我想通过 <a> 放置几个链接在图像上<img> .
这基本上不是问题，但是当您调整窗口大小(例如不同的设备)时，它会以不同的方式缩放链接和图像的位置。

我创建了一个 fiddle来显示行为。
如果将窗口右下 Angular 重新缩放，您可以看到该链接没有“粘”到图像上。
我如何实现这一目标？

我有这个功能组件(如 fiddle 所示):

<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 规则中设置图像的大小，以 px 或百分比为单位，否则图像将以其原始大小显示，不会缩放/不响应。

设置 width应该足够了，但为了保存，您可以添加 height: auto ，反之亦然，定义 height并添加 width: auto
对于文本链接，最好将其居中，使用 left: 50%; top: 50%; transform: translate(-50%, -50%); .这将在响应方面更好地工作。您也可以定义一个较小的 font-size在媒体查询中。

ADDITION(在仔细查看您提供的 fiddle 之后):

1.) 你有一个 div parentDiv之间的层和图像本身:.imgWrapper分区。您需要为此设置 CSS:通过添加以下内容使其与 parentWrapper 的大小相同:

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

这样，图像设置 height: 100%可以涉及 70vh height .parentDiv 的设置.

2.) 在fiddle中，没有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/