html - 我如何制作一个柔性块，使其宽度和高度与柔性照片相同，并位于照片的顶部？(How do I make a flexible block that will make have the same width and height as a flexible photo and will be on top of the photo?)

Question

look, i have a photo (1000px).

(看，我有一张照片（1000px）。)

This photo is flexible.

(这张照片很灵活。)

It means when the user's window is less than 1000px photo starts reducing in proportion.

(这意味着当用户的窗口小于1000像素时，照片开始按比例缩小。)

So, i want to make a block, that will do the same as photo.

(所以，我想做一个方块，它将和照片一样。)

That block should have width and height like a photo.

(该块应具有与照片一样的width和height 。)

 .img_random{ margin-left: 50%; transform: translate(-50%); position: absolute; max-width: 1057px; width: 95%; } .img_random img{ width: 100%; } .block-that-should-be-like-a-photo{ position: absolute; max-width: 1057px; height: 621px; width: 95%; background-color: red; opacity: 0.5; margin-left: 50%; transform: translate(-50%); } 

 <div class="img_random"> <img src="https://sun9-14.userapi.com/c857536/v857536576/10ef5e/WDQSe10CrOs.jpg" alt="A random photo"> </div> <div class="block-that-should-be-like-a-photo"></div> 

  ask by slower. translate from so

Answer 1

You just need to put your overlay div inside the same parent as the image and make the overlay take up 100% of the parents space to match the space taken by the image.

(您只需要将叠加层div与图片放置在同一父对象中，并使叠加层占据100％的父空间即可匹配图片所占用的空间。)

 .img_random{ left: 50%; transform: translate(-50%); position: absolute; max-width: 1057px; width: 95%; } .img_random img{ width: 100%; } .block-that-should-be-like-a-photo{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: red; opacity: 0.5; } 

 <div class="img_random"> <img src="https://www.tanianault.ca/wp-content/uploads/2017/02/Nault-SunsetOverBaldButte-1000px.jpg" alt="A random photo"> <div class="block-that-should-be-like-a-photo"></div> </div>