如何在 parent div 调整大小时调整 child div 和其中的图像

Question

我有一个 parent div，其中包含一个视频 video-container。
我想在超链接视频的顶部放置图标。所以我为图标 link-container 制作了一个 div 并将其放在 parent div.
中现在，如果我调整浏览器 window 视频大小，但 child div 保持相同大小。我希望 child div 中的图标根据 parent div 相应地调整大小，以便它们始终保持在覆盖视频的相同位置（就好像图标是一部分的视频）。

<div class="video-container">
    <div class="myvideo">
        <video />
    </div>
    <div class="link-container">
        <a href="https://www.link.com/">
            <img class="imglink" />
        </a>
    </div>
</div>

.video-container {
  position: relative;
}

.link-container {
  position:absolute;
  top:70%;
  left:10%;
}

.imglink {
  width: 100px; /*i also tried auto here*/
  height: 100px; /*i also tried auto here*/
  content: url('./assets/img.png');
}

谢谢。

Answer 1

您可以使用百分比宽度：100%

.video-container {
  position: relative;
  width: 90vw
}

.link-container {
  position:absolute;
  top:70%;
  left:10%;
}

.imglink {
  width: 10vw; /*i also tried auto here*/
  height: 10vw; /*i also tried auto here*/
  content: url('data:image/png;base64,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');
}

<div class="video-container">
    <div class="myvideo">

      <video width="100%" >
        <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4"> 
        Your browser does not support the video tag.
      </video>
    </div>
    <div class="link-container">
        <a href="https://www.link.com/">
            <img class="imglink" />
        </a>
    </div>
</div>

Answer 2

如果你想根据浏览器调整大小 window 尺寸，我建议使用 window-related 单位，例如：
vh - 视口高度
vw - 视口宽度

您可以在 CSS here

中了解有关不同度量单位的更多信息

我针对您的特定问题提出的解决方案如下：

<div class="video-container">
    <div class="myvideo">
        <video />
    </div>
    <div class="link-container">
        <a href="https://www.link.com/">
            <img class="imglink" />
        </a>
    </div>
</div>

.video-container {
  position: relative;
}

.link-container {
  position:absolute;
  top:70%;
  left:10%;

  /* for example 2% of viewport width / height */
  width: 2vw;
  height: 2vh;
}

.imglink {
  width: 100%;
  height: 100%;
  content: url('./assets/img.png');

  /* to avoid image stretching */
  object-position: center;
  object-fit: contain;
}

在此示例中，如果视口宽 1000 像素，高 500 像素，则容器将是 20px 宽和 10px 高。假设图标是方形的，它的尺寸为 10px 宽和 10px 高，与容器中心对齐。

如何在 parent div 调整大小时调整 child div 和其中的图像

How to resize child div and images in it when parent div resizes

html

css