如何在具有弹性布局的网站上并排显示两个图像，这将自动缩放到父容器的 50%？
我昨晚在玩它，但没有走得太远。
当我使用 div 时，它们相互重叠，或者第二张图片首先显示在下方。
当我使用表格时，表格变得比屏幕宽，导致垂直滚动条。
我事先不知道图片的大小，也不知道用户的分辨率是多少，理想情况下我会完全通过 css 进行设置，而不使用 javascript。
通过设置max-width:90%，我在其他页面上通过单个图像自动缩放以适应容器，但我不能在这里应用这个技巧。有趣的是，这个场景的 max-width 是根据窗口（父元素）设置的，而在上面的示例中，max-width 是根据图像本身的宽度设置的。
对不起，我的英语不好，如果有不清楚的地方，请询问。
谢谢
【问题讨论】：
标签： html css elasticlayout
我明白你在说什么。我觉得它们有点太宽了，所以我稍微偏离了边距，因为它不会占用百分号的一小部分。看看这是否能解决问题：
<html>
<head>
<style>
div {
width: 80%;
background: #acf;
}
div img {
width: 50%;
padding: 0;
margin: 0 -0.2em 0 0;
}
</style>
</head>
<body>
<div>
<img src='a.jpg' />
<img src='b.jpg' />
</div>
</body>
</html>
编辑：或者更好的是，如果你只有盒子里的图片，不要让它包装：
<html>
<head>
<style>
div {
width: 80%;
background: #acf;
white-space: nowrap;
overflow: visible;
}
div img {
width: 50%;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div>
<img src='a.jpg' /><img src='b.jpg' />
<!-- Don't put a space between the images. -->
</div>
</body>
</html>
【讨论】：
<img> 语句之间没有空格或回车。