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

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 >
    <div >
        <video />
    </div>
    <div >
        <a href="https://www.link.com/">
            <img  />
        </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.

CodePudding user response：

You can use percentage width: 100%

.video-container {
  position: relative;
  width:100%
}

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

.imglink {
  width: 20%; /*i also tried auto here*/
  height: 20%; /*i also tried auto here*/
  content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGYAAABmCAMAAAAOARRQAAABHVBMVEX////qQzU0qFNChfT7vAWvx/k6gfSJrfc0f/TpOytMivT7twDqQTP7uQD/vQDqPzAmpUrpNiX  vrrVEnpMiD50c/8wgAdo0XqRzrwiYPpLBf/ /QqevPi8OW83cPs9e7oHwD63dvtamH1sKz75OP2uLX3w8DzpaH98vLynJfpOjf92pn8xk/936f 6sn91on7viL 9eb8z3j8ymH7wDRpmvbkuRqbzqZdtXJouXsAnzlRsWmBw5DvenLtY1nucmr7zozrTR/wdyj0kx/4qhHvaSzyhCXtWzD837kQcvPe5/3E1fvz5LulsDFzrUeeu/jDtS3w9P6Qrz9bqkzO5tM6i9kzqz09l7M4n4k3pmdAiuI ksU6m5w6pXJkqrVHEHzgAAAE20lEQVRogb2Ya2OiRhSGETERRRkERYiiJl6TvaW7Fu/ZtrvtNtltml2bbrtt///P6AASuczADKDvR53x4ZzzzjmMDEOsWn840tbncjOXa8qbG20yqI/JdxOpP9A2XV3heVEUclCCIPK8pHeF9ahXy4jRm2wgQcwhJIiSLmv19KTxhaxISMQTitebWi8dRJOUSIZLUjb1xJD ussL8RBboi4nA401nSdk7EDnCVJ3IUo0EAc0oTRDf6OQpssriS5zFzpB4TEBEUNqN3oyiCVlQ9gb k2q0gfFN/sklHr0aYyXyBMUaJio9j5JcixloKem8HKsrQfdtBASyvAolPpRMtYnbpRpKDU5xsmCwEvKThIvIp6JgMKsI3ulICq8vB4N671 v1cfXmgy/CBAIqEMojqMIEnng8DpHg 1nG/okVDGURSFnyA7yHgg711DQmE2 MLw gj/A0NBoqDgUyboWvT iT01iCi1HM7LfC62EfZgSyeiMBMFV5VzgvExvtGJKGPcwdQ1gt3WYxLNsrc/XKIp5COXQGflxo8ojpIphbmqcI2fwhyFMGOkqnAc13iXC4D4TbaUj2XO4lTe ziCmPH15RnnqPGzl6Mnf/lG6rrCuZx3e46UcWGY508YrlH 5fJAKXvKmQPaOVsaZUy55nxynC3wWV0pXb0oBziWs/lsDybUywoXUOP9ZTfrYPylcZ29zppy9iqM4bgPWWOuywhK SxqS4FSD0zYAbaeRT5ZvkilX2/hnucITOVlJKaUp1LxjkEZDebsRaaYe7jnOxTmOkvMySnc8xpltOwxiGPDvYk0GjVmCve8oTYaLSZ/HMyRojkpHSdpFuZIFji8oW0LHP542pjDNxs7aYdvnXYXQA6C15ljEow12g5dYDBDuvwxCpM/wQqFaVnzBnVwqp/mUZhTvKYojDWkw1arcr xi8ji4HWPisfGBD1Q/Z5lWWAmw6CimdrfBF5uq7 zlkAiykMrTLGNxviLU U sw4mUTiFIs4BvotH9dUX1lUnAQZl9eKt893 GmWXZSewoqfcIXJmjwFbu6xVq59YjxbbTIJxS8MwH8quj/2iTRuqMs7LoKNKIGG7tM3oKA8ICIxmv Cq4vrYJ5WuPFPU0dznzPozpfo5TIEcGlefolKWb916llx9QVGgDcg59yiXQXnXdAAaQ543DKVV8K0yVRxnRuS3U0ws cA6DAX6jY0/P7clZF12dw6vDFw4BIkz2T8wGGcGeDXDlQcGFOkEAwb8 CeSUyyEVnfw4cCAWLONZHRM1t73 DWPODUlxA5jEcFhgTozgqS2MQfuw4G//g4F1LpDYJgVPm1OSICdm8a2DbXdGuaMBd4EAPAt4DZvA/BqGY2xf0vdCYSf6fGfAAdTTOwhJZT6b8lTIF b8WkbZQMCAY zW2GXEdqAJCDX2UVMYTLiPH4tWok7mUZRMuAAFjr7BHVi/JyU9YEBfWvFUqAPUvoNcv4LtTKE2mw6kDqPviE/aZ4mcRQTFzvlYgVUg5gCG8IyGYhw2HoCSlAhwNKEsgtotaADgcUqyes9HQgs5ujJRwRSyWoE1FViiA0ylmpcSEBdmonS5VPbnKlYFJxzS8x7Ar06xmq5WPhGJoCTdKHOVkb6OPxqG ZqNbMn XI5X5nmljiK/wHna5fr0EEhEQAAAABJRU5ErkJggg==');
}

<div >
    <div >

      <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 >
        <a href="https://www.link.com/">
            <img  />
        </a>
    </div>
</div>

CodePudding user response：

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 >
    <div >
        <video />
    </div>
    <div >
        <a href="https://www.link.com/">
            <img  />
        </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.