-
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%;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.