Adjust Portrait Image to CSS Landscape

Question

When the image is landscape, the thumbnail is top. When it is portrait, the function does not adjust so that it stays in landscape mode by adjusting the image with the proper proportions.

When I click INSPECT code, this is the CSS that is working the image:

element.style {
}

.add-image a img {
    max-width: 100%;
    max-height: 100%;
    position: relative;
    margin: auto;
}
.no-margin {
    margin: 0!important;
}
.thumbnail {
    display: block;
    padding: 4px;
    position: relative;
    margin-bottom: 20px;
    line-height: 1.42857143;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    -webkit-transition: border .2s ease-in-out;
    -o-transition: border .2s ease-in-out;
    transition: border .2s ease-in-out;
}
img {
    vertical-align: middle;
}
img {
    border: 0;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Answer 1

using only CSS can center and crop an image as follows:

.thumbnail {
  background-position: center;
  background-size: cover;
}

<div class="thumbnail" style="background-image: url('image.jpg');"></div>