-
  var images1 = [
    {width: 245, height: 50},
    {width: 333, height: 111},
  ]
  var images2 = [
    {width: 130, height: 130},
  ]

.parent
  for image in images1
    .child(style='flex:'+(image.width/image.height)+';max-width:'+image.width+'px;')
      img(src='//dummyimage.com/'+image.width+'x'+image.height)

hr

.parent
  for image in images2
    .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.