Question

感觉我已经探索了这方面的每一个选项，并且没有导致大量的javascript工作，我想看看是否还有另外一种解决方法。

我有一个100vh的固定主容器。此客户端的目的是不允许任何滚动。在这个容器里面，我有许多图像布局，无论浏览器的宽度/高度如何，图像都需要保持相同的比例和大小。

这是两个示例布局，黑框是图像：

我认为一开始很简单，只是给图像一个宽度百分比，他们会有反应，但他们也需要响应高度。

如果您调整浏览器的大小，您可以看到图像保持与它们周围的broswer间距的比例等。检查元素我可以看到它们动态调整高度和宽度但是如果可能的话我正在寻找一种纯粹的CSS方式？

示例html标记：

<div class="layout">
    <div class="image-wrapper">
        <img src="img1.png/><img src="img1.png/>
    </div>
</div>

Answer 1