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

Question

我一直在努力，但未能使以下内容发挥作用。

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

我希望让它们占据屏幕的整个宽度并将它们缩小（仍然以 40% 和 60% 并排）到一个点，并最终以 100% 堆叠在一起全宽（比如在 720 像素宽以下的任何分辨率下），但仍然尊重其原始纵横比。所以此时 Div B 中的图像实际上 'shorter' 而不是 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%; }
}

编辑：

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

Answer 2

您可以使用 bootstrap 来完成。这是一个可以帮助您的小片段：

.a {
  background-color: blue;
  height: 100px;
}

.b {
  background-color: red;
  height: 100px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="a col-xs-12 col-sm-5"></div>
<div class="b col-xs-12 col-sm-7"></div>

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

2 side by side full width div tags of different widths (40%/60%) that scale down to and eventually stack at 100% width

html

css

center