html - 2 个并排的不同宽度 (40%/60%) 的全宽 div 标签，按比例缩小并最终以 100% 宽度堆叠

Question

我一直在尝试并未能使以下工作正常进行。

我有 2 个 div 标签，每个标签都包含一个图像。左侧的 Div A 包含原始尺寸为 768 x 400 的图像，右侧的 Div B 的尺寸为 1152 x 400。因此这些图像代表 40% 宽度和 60% 宽度。

我希望让它们占据屏幕的整个宽度并将它们缩小(仍然以 40% 和 60% 的比例并排)到一个点，并最终以 100% 的全宽相互堆叠(比如在 720 像素宽以下的任何分辨率下)但仍然尊重其原始纵横比。因此此时 Div B 中的图像实际上会比 Div A“短”。

我已尝试用所附图片对此进行说明。

如有任何帮助，我们将不胜感激。

谢谢，

https://s13.postimg.org/qq94pfq3b/2_divs.png

Answer 1

像这样的东西应该可以工作。请注意，将这些图像堆叠在一起的断点位于 767px，这是移动 css 应该开始的标准分辨率。

HTML:

<div class="a">
    <img src="image1.png">
</div>
<div class="b">
    <img src="image2.png">
</div>

CSS:

.a, .b { float: left; }
.a img, .b img { width: 100%; }
.a { width: 40%; }
.b { width: 60%; }

@media screen and (max-width: 767px) {
    .a, .b { width: 100%; }
}

编辑:

我刚刚注意到您的图片的比例不一样。您如何期望他们按照您所设想的方式并排排列，按照您所写的那样尊重他们的自然比例，而不是一个比另一个高？