How to scale an image with css to fill a div keeping aspect ratio?

Question

I\'d like to fill a div with an img, keeping aspect ratio and stretching either width or height as much as required to fit in.

Answer 1

To keep an image's aspect ratio, just specify one dimension:

div {
    width: 80px;
    height: 80px;
    border: 2px solid red;
    overflow: hidden;
}

img {
    height: 100%;
}

This will produce the following effect:

However, as you can see, the kitten is not central, but you can use Flex box to sort this out.

div {
    width: 80px;
    height: 80px;
    border: 2px solid red;
    justify-content: center;
    display: flex;
    flex-direction: row;
}

img {
    flex: 1;
    height: 100%;
}