Maximize While Maintaining Aspect Ratio

Maximize element size within container bounds while maintaining fixed aspect ratio.

Structure

Nested containers with absolute positioning for aspect ratio constraint.

<div class="container">
  <div class="inner">
    <div class="aspect-ratio-lock">
      <!-- Your contents -->
    </div>
  </div>
</div>

Aspect Ratio Scaling

Combine aspect-ratio with object-fit: contain on absolutely positioned element to scale within parent bounds.

  .container {
    position: relative;
    border: 1px solid #aaa;
    width: 100%;
    height: 100%;
  }
  .inner {
    position: absolute;
    inset: 0;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 16 / 9;
    object-fit: contain;
  }
  .aspect-ratio-lock {
    width: 100%;
    height: 100%;
    background-size: 10px 10px;
    background-attachment: fixed;
    background-image: repeating-linear-gradient(315deg, #aaa 0, #aaa 1px, transparent 0, transparent 50%);
  }

<div class="container">
  <div class="inner">
    <div class="aspect-ratio-lock">
      <!-- Your contents -->
    </div>
  </div>
</div>
<div class="hint">Resize</div>
<style>
  body {
    padding: 2rem;
  }
  .container {
    position: relative;
    border: 1px solid #aaa;
    width: 100%;
    height: 100%;
  }
  .inner {
    position: absolute;
    inset: 0;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 16 / 9;
    object-fit: contain;
  }
  .aspect-ratio-lock {
    width: 100%;
    height: 100%;
    background-size: 10px 10px;
    background-attachment: fixed;
    background-image: repeating-linear-gradient(315deg, #aaa 0, #aaa 1px, transparent 0, transparent 50%);
  }
  .container {
    resize: both;
    overflow: hidden;
    anchor-name: --container;
  }
  .hint {
    position: fixed;
    position-anchor: --container;
    bottom: anchor(bottom);
    right: anchor(right);
    margin: 12px;
    background: #232323;
    color: white;
    padding: 0.5rem;
    border-radius: 12px;
    font-size: 0.875rem;
    opacity: 0.9;
    user-select: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  .hint::before {
    content: '';
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 12px solid #232323;
    filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, 0.1));
    rotate: -45deg;
  }
</style>