无论浏览器大小如何，图片都需要并排放置
Posted
技术标签:
【中文标题】无论浏览器大小如何，图片都需要并排放置【英文标题】：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 有什么关系？ 【参考方案1】：如果窗口发生变化，则更改图像的大小。
这听起来像是使用 CSS viewport 相关单元的任务。在这种情况下可能是vw 即与宽度有关（100vw = 全宽），请考虑以下简单示例
<html>
<head></head>
<body>
<div style="background-color:#0000FF;height:100px;width:50vw"></div>
</body>
</html>
它确实提供了具有 100 像素的恒定高度和一半视口宽度的蓝色 div，它会根据您更改浏览器窗口的大小而缩小或拉长。
【讨论】：
这成功了！非常感谢！ @ghostieghost34 不要忘记接受答案 :)以上是关于无论浏览器大小如何，图片都需要并排放置的主要内容，如果未能解决你的问题，请参考以下文章
使用 HTML/CSS（响应式设计）使可变数量的 div 并排放置在相同的高度上？