Inner div with square ratio and flexbox [duplicate]

Answer 1

A similar answer to the one provided by Temani Afif, but using an svg instead of an image (so no need to the extra request).

Also, it's easier to adapt it to arbitrary aspect ratios

.container {
  height: 150px;
  background-color: lightblue;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px;
}

.aspectRatio {
  display: grid;
  background-color: yellow;
  height: 50%;
}
.aspectRatio svg {
  height: 100%;
  border: solid 1px red;
  animation: resize 1s infinite;
}
.aspectRatio > * {
  grid-area: 1 / 1 / 2 / 2;
}

@keyframes resize {
  from {height: 100%;}
  to {height: 99.9%;}
}

  

    
    
square
  


  

    
    
ratio 4/3