​x
 
<!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>
​
<div id="container">
  <div><img src="/i/photo/beijing.jpg" alt="北京" width="460" height="345"></div>
  <div><img src="/i/photo/wuhan.jpg" alt="武汉" width="460" height="345"></div>
  <div><img src="/i/photo/hangzhou.jpg" alt="杭州" width="600" height="400"></div>
  <div><img src="/i/photo/chongqing.jpg" alt="重庆" width="600" height="400"></div>
</div>
​
</body>
</html>
​