<style>
   div {
      width: max-content;
   }
   #circles-portrait-1 {
      width: 100%;
      max-height: 50px;
   }
   #circles-portrait-2 {
      width: 100%;
      min-height: 50px;
   }
   #circles-portrait-3 {
      width: 50%;
      max-height: 50px;
   }
   #circles-portrait-4 {
      width: 50%;
      min-height: 50px;
}
   #circles-portrait-5 {
      width: 100%;
      min-height: 50px;
      max-height: 20px;
   }
</style>

<div><img id="circles-portrait-1" src="resources/circles-portrait.png"></div>
<div><img id="circles-portrait-2" src="resources/circles-portrait.png"></div>
<div><img id="circles-portrait-3" src="resources/circles-portrait.png"></div>
<div><img id="circles-portrait-4" src="resources/circles-portrait.png"></div>
<div><img id="circles-portrait-5" src="resources/circles-portrait.png"></div>