我在一张桌子上有 3 张图片，这是我弄清楚如何让它们彼此相邻的唯一方法。我遇到的问题是，在我使用的屏幕上，它们看起来就像我希望它们在底部没有滚动条的样子，但在其他尺寸的屏幕上，它们会强制整个页面扩展，因此需要滚动才能看到页面的整个宽度。如何使外观具有响应性，以使图像相对于其他所有内容保持相同大小？
附上截图
【问题讨论】：
标签： html css responsive-design
有几种很好的方法可以让这样的网页响应屏幕尺寸。我将描述其中两个，但同样，还有更多：
使表格宽度与页面宽度匹配
首先，您需要确保页面本身具有样式 position: relative 在其上 - 以便其任何子项（包括您的表格）可以相对于它定位或调整大小。使用 css 有几种方法可以做到这一点，但如果您使用的是类，则可以将 html 中的所有标准高级元素分配为相对定位，并成为浏览器提供的全宽。
html, body {
position: relative;
width: 100%;
min-width: 100%; //we do both width and min-width for compatability with old browsers
}
现在已经不碍事了，您有了动态宽度的起点。如果表格是<body> 元素的直接子元素，那么您应该为它定义一个类，该类也将给它100% 的宽度。请记住，此宽度映射到其父级的宽度，因此由于 <body> 是整个页面宽度，那么表格也将尝试如此！如果你想在它周围添加一些空间（这样它就不会真正碰到页面边缘，你也可以添加一些填充！
.fullWidthTable {
position: relative;
width: 100%;
min-width: 100%;
padding-left: 20px;
padding-right: 20px;
}
现在您可以将该类放在您的表格元素上，它应该映射到页面大小！请记住，如果您的图片没有根据其 <td> 父级的大小重新调整大小，那么它们可能会重叠或出现其他一些不受欢迎的行为。
使用引导
因此，如果您有兴趣使用现有框架来组织网页上的 html 元素，我强烈推荐 Bootstrap。 Bootstrap 为您提供了许多具有一致且可预测的结构的预定义类，您可以使用它们来制作动态网站。一般来说，bootstrap 结构主要涉及三个类：
它实际上与使用 html 表格非常相似 - 但它在设计时考虑了动态大小。
您可以在此处找到使用 Bootstrap 的完整文档和示例：Bootstrap Docs
【讨论】：