1

如何在具有弹性布局的网站上并排显示两个图像，这将自动缩放到父容器的 50%？

我昨晚在玩它，但没有走得太远。

当我使用 div 时，它们相互重叠，或者第二张图像首先显示在下方。

当我使用表格时，表格变得比屏幕宽，导致垂直滚动条。

我事先不知道图像的大小，也不知道用户的分辨率是多少，理想情况下我会完全通过 css 设置它，而不使用 javascript。

我在其他页面上很幸运，通过设置单个图像自动缩放以适应容器，max-width:90%但我不能在这里应用这个技巧。有趣的是，这个场景的最大宽度是根据窗口（父元素）设置的，而在上面的示例中，最大宽度是根据图像本身的宽度设置的。

对不起我的英语，如果有不清楚的地方，请询问。

谢谢

4

1 回答 1

2

我明白你在说什么。我觉得它们有点太宽了，所以我稍微偏离了边距，因为它不会占用百分号的一小部分。看看这是否可以解决问题：

<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>
于 2009-10-30T19:03:49.053 回答