html - 我如何制作一个柔性块，使其宽度和高度与柔性照片相同，并位于照片的顶部？

看，我有一张照片（1000px）。这张照片很灵活。这意味着当用户的窗口小于1000像素时，照片开始按比例缩小。所以，我想做一个方块，它将和照片一样。该图块应具有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>

最佳答案

考虑到比率将始终相同的事实，可以考虑以下代码：

.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;
  width: 95%;
  background-color: red;
  opacity: 0.5;
  margin-left: 50%;
  transform: translate(-50%);
}
.block-that-should-be-like-a-photo:before {
  content:"";
  display:block;
  padding-top:48%; /* The ratio of the image*/
}

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

<div class="block-that-should-be-like-a-photo"></div>

关于html - 我如何制作一个柔性块，使其宽度和高度与柔性照片相同，并位于照片的顶部？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59124196/