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