CSS/HTML 屏幕尺寸自适应块/图块

Question

我确信之前已经有人问过这个问题，但我不确定术语，这意味着我的搜索结果没有提供任何相关内容。

我想在我的页面中添加一些相同大小的内容块，它们应该按行和列组织，没有表格，并适应更大和更小的屏幕尺寸。图片示例：

是否有一种简单的跨浏览器非 JS 方法可以做到这一点，无需刷新页面（适应屏幕尺寸的变化，即调整大小）？

Answer 1

该技术称为响应式网页设计。您可以创建一个四列页面布局，其中有四个 div 列，每个列的宽度为 23%（加起来略低于 100%）。您需要学习 HTML 和 CSS，然后学习响应式网页设计。网上有很多帮助。

图像也可以通过使用 CSS 来实现响应式，如下所示：

img { 
          max-width: 100%;
          height: auto;
 }

您还可以选择学习 Bootstrap 框架，这是一个用于创建响应式网站的 HTML 框架，可用于创建响应式 4 栏设计。

Answer 2

如果您想调整图像使用：

object-fit: cover;