-
  var images = [
    {width: 234, height: 120},
    {width: 333, height: 111},
    {width: 500, height: 420},
    {width: 640, height: 250},
    {width: 280, height: 280},
  ]

.parent
  for image in images
    .child(style='flex:'+(image.width/image.height)+';max-width:'+image.width+'px;')
      img(src='//dummyimage.com/'+image.width+'x'+image.height)
View Compiled
body {
  margin: 0;
}
.parent {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
}
.child {
  padding: 5px;
}
img {
  max-width: 100%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.