无论浏览器大小如何，图片都需要并排放置答案

【问题标题】：Pictures need to stay side by side regardless of browser size无论浏览器大小如何，图片都需要并排放置
【发布时间】：2022-01-15 05:27:42
【问题描述】：

我们的项目正在尝试比较两张图片。我们可以弹出两张图片，但是如果我们改变窗口的大小，它们只会在彼此之上移动。我们希望它们并排放置，如果窗口发生变化，只需更改图像的大小。我还为我们的图像提供了一个代码行示例。

var stimulus =
  '<img src=' +
  'img/' +
  artistArray2_b[3] +
  '/' +
  lastName_b[3] +
  1 +
  '.jpg' +
  ' style="max-width:100%;" />, <img src =' +
  'img/' +
  artistArray2_b[3] +
  '/' +
  lastName_b[3] +
  2 +
  '.jpg' +
  ' style="max-width:100%;" />';

【问题讨论】：

如果你想让每张图片最多占据屏幕宽度的一半，为什么要把每张图片的最大宽度设置为100%？
这与 Python 有什么关系？

标签： javascript python html image display

【解决方案1】：

如果窗口发生变化，则更改图像的大小。

这听起来像是使用 CSS viewport 相关单元的任务。在这种情况下可能是vw 即与宽度有关（100vw = 全宽），请考虑以下简单示例

<html>
<head></head>
<body>
<div style="background-color:#0000FF;height:100px;width:50vw"></div>
</body>
</html>

它确实提供了具有 100 像素的恒定高度和一半视口宽度的蓝色 div，它会根据您更改浏览器窗口的大小而缩小或拉长。

【讨论】：

这成功了！非常感谢！
@ghostieghost34 不要忘记接受答案 :)