中文
devexamples

Aspect Ratio Box Responsive Media

Maintain a fixed aspect ratio for responsive media containers using the CSS aspect-ratio property without padding hacks.

CssData Fetching

Code

snippet
.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
  background: #000;
}

.video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.square-avatar {
  aspect-ratio: 1;
  width: 80px;
  border-radius: 50%;
  overflow: hidden;
}

.poster {
  aspect-ratio: 2 / 3;
  max-width: 300px;
}

Related Examples