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

user_3195374 0
Viewed 84

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.

css html
2 Answers

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>

user_66312800

If you want to resize based on the browser window dimensions, I would recommend using window-related units, such as:
vh - viewport height
vw - viewport width

you can learn more about different measure units in CSS here

My proposed solution for your particular problem is following:

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

In this example, if the viewport is 1000px wide and 500px high, the the container will be 20px wide and 10px high. Assuming the icon is square, it will be of size 10px wide and 10px high aligned to the center of container.

user_119686660
Related