CSS 参考手册在线编辑器 | CSS 参考手册代码测试

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

#container {
  display: grid;
  width: 90%;
  margin: auto;
  border: solid black 1px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  padding: 10px;
}
  
#container > div {
  aspect-ratio: 3 / 2;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
</style>
</head>
<body>

<h3>CSS aspect-ratio property.</h3>
<p>Resize browser window to see how the layout behaves.</p>
<p>Div elements with images inside are organized in responsive grid layout to make it look good on all devices. CSS aspect-ratio property adjusts height automatically to maintain correct ratio between width and height of div element. Correct ratio between width and height of the image is also maintained with the object-fit property set to cover.</p>

</body>
</html>