W3School TIY Editor

<!DOCTYPE html>
<html>
<head>
<style>

#container {
  display: grid;
  width: 90%;
  margin: auto;
  border: solid black 1px;
  /* 自动适应列数，每列最小宽度 180px，最大宽度为 1fr： */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px; /* 网格项之间的间距 */
  padding: 10px; /* 内边距 */
}
  
#container > div {
  aspect-ratio: 3 / 2; /* 宽高比设置为 3/2 */
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 图片裁剪以适应容器，保持图片的纵横比 */
  object-position: center; /* 图片在容器中的位置设置为居中 */
}
</style>
</head>
<body>

<h1>CSS aspect-ratio 属性。</h1>
<p>调整浏览器窗口大小，查看布局的变化。</p>
<p>包含图片的 div 元素以响应式网格布局排列，以便在所有设备上都能良好显示。CSS 宽高比属性会自动调整高度，以保持 div 元素的宽度和高度之间的正确比例。通过将 object-fit 属性设置为 cover，也能保持图片宽度和高度之间的正确比例。</p>

</body>
</html>