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

Issue

I have a parent div which contains a video video-container.
I want to place icons on top of the video which are hyperlinks. So I made a div for the icons link-container and placed it inside the parent div.
Now if I resize the browser window video resizes but the child div remains the same size. I want the icons inside the child div to resize accordingly with the parent div so they always remain in the same position overlaid on the video (as if the icons were part of the video).

<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');
}

Thanks.

Solution

You can use percentage width: 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>

Answered By – Ravi Makwana

Answer Checked By – Jay B. (AngularFixing Admin)

Leave a Reply

Your email address will not be published.