如何相对于另一个图像调整图像的大小？

Question

我在一个页面上有两张图片。一幅图像使用负的上边距与另一幅图像重叠。两个图像大小不同。我遇到的问题是，当您调整页面大小时，宽度较大的图像会缩小，但另一张较小的图像保持不变。

我需要两个图像在 window 调整大小时保持相对于彼此相同的大小。我附上了页面的屏幕截图。

感谢您的帮助！

Html:

  <div class="row">
    <div class="col-md-10 col-md-offset-1">
      <img class="section__diagram" src="/wp-content/uploads/product-architecture-cloud-screens.png" />
      <img class="section__diagram" style="margin-top:-92px;" src="/wp-content/uploads/product-architecture-cloud.svg" />
    </div>
  </div>

Desktop Size Proper Ratios Smaller Size

Answer 1

视口单位（vh、vw）应该可以满足您的需要。因为缩放是相对于视口的，所以两个图像将保持它们始终具有的相同缩放比例。

如何相对于另一个图像调整图像的大小？

How to resize an image relative to another image?

html

css

image

response