Fit Picture Portrait to CSS Landscape

Navigation
0

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

When I click on 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;
}
    
asked by anonymous 02.12.2016 / 14:46

1 answer

0

Using CSS only, you 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>
    
02.12.2016 / 16:55
How can I create a SeekBar How to present different lists of categories in a same page using Laravel 5.3