Make an image fit inside a div with any width/height
.img-squeeze {
position: relative;
width: 100%;
padding-bottom: 40%; /* height = 40% of width */
}
.img-squeeze__inner {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
img {
display: block;
flex: 0 1 auto;
max-width: 100%;
max-height: 100%;
min-height: 1px;
width: auto;
height: auto;
}
}