W3Schools Tryit 编辑器 - W3Schools 中文教程

<!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>