/*body:not(class){background-color:#ECEFF1}*/
.cd-main-content {
    position: static;
/*	padding:20% 0 2em;*/
	padding:2em 0;
}

/*.main-wide{margin-top: calc(100vh - 100px);}*/

@media only screen and (max-width:640px){
.cd-primary-nav .logo{width:64px}
}
.in-load#owl-thmbs{height:100px;border-top:4px solid #FFF;}
.product-images .ph{float:right;width:56%;text-align:center}
.product-images .ph img{margin:0 auto;max-width:600px}
.product-images article{width:38%}
.product-descr {width:38%;float:left}
.product-descr ul{list-style: outside;margin-left: 2em;}
.hid{opacity:0}

#project-items{
    position: absolute;
	height:calc(100% - 80px)!important;
	z-index: 100;
	background-color: #FFF;
	top:80px;
	left:0;
	right:0;
    overflow:hidden;
	opacity:1;
	transition:top .5s;
	/*	height:100%;
	bottom:0;height: calc(100% - 100px)!important;    border: 2px solid red;
*/
}
.the-scroll#project-items{top:-100%;opacity:.1;
}

#project-items>div{height:100%}

#owl-flats{position:relative;min-height:300px;height:100%;overflow:hidden}
/*#owl-thmbs {position:relative;float:none;min-height:120px;margin:-1rem auto 0;overflow:hidden;z-index:100}*/
#owl-thmbs {
	position: absolute;
    float: none;
	top:98%;
    left: 0;
    right: 0;
    height:30%;
	padding-top:1em;
   /*	bottom:0;
 margin: -1rem auto 0;
     overflow: hidden;     background-color:rgba(0,0,0,.1);
*/
    z-index: 100;
    opacity: .1;
    transition: opacity .5s;

}
#project-items .owl-stage{height:100%}
.owl-stage-outer{bottom:0;transition:bottom .25s;}
/*
#project-items #owl-thmbs {opacity:1;}
#owl-thmbs .owl-stage-outer{bottom:100%}
*/


/*

########## object-fit variant


.row-fluid {
  display: table;
}

.row-fluid .span6 {
  display: table-cell;
  vertical-align: top;
}

.vc_single_image-wrapper {
  position: relative;
}

.vc_single_image-wrapper .image-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
<div class="vc_single_image-wrapper   vc_box_border_grey">
  <div class="image-wrapper" style="background-image: url(http://i0.wp.com/www.homedecor.nl/wp-content/uploads/2016/03/Gordijnen-Home-Decor-2.jpg?fit=952%2C480;"></div>
</div>


######## other variant
Basically Object-fit: cover was not working in IE and it was taking 100% width and 100% height and aspect ratio was distorted. In other words image zooming effect wasn't there which I was seeing in chrome.

The approach I took was to position the image inside the container with absolute and then place it right at the centre using the combination:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
Как только это в центре, я даю изображение,

// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;

// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;

*/




#project-items:hover #owl-thmbs {opacity:1}
#project-items:hover #owl-thmbs:hover .owl-stage-outer{bottom:88%}

h1.nav-social{font-size:inherit;color:inherit;font-weight:600;padding-left:1.5em;text-transform:uppercase;display:table-cell;vertical-align:middle;height:100%}
h1.nav-social span{margin-left:.5em}

@media screen and (max-width:960px){
.cd-primary-nav .logo{width:64px}

}

@media screen and (max-width:768px){
.cd-auto-hide-header .nav-trigger{box-shadow:-28px 0 20px -12px #FFF}
h1.nav-social{padding-left:.5em!important}
.product-descr,.product-images{float:none;width:100%}
#owl-thmbs {position:relative;float:none;min-height:120px;
}
}
@media only screen and (max-width:520px){
}
#project-items:hover .owl-controls .owl-nav {opacity:.9}
#project-items:hover .owl-controls .owl-nav div{margin:0}
#project-items .owl-controls{margin-top:-5rem}
#project-items .owl-controls .owl-dot span{border:2px solid rgba(176,190,197,.7)}

#owl-flats .owl-stage-outer,#owl-thmbs .owl-stage-outer{position:relative;height:100%;margin:0;overflow:hidden}
#owl-flats .owl-item{
	float: left;
    vertical-align: top;
    text-align: center;
    height: 100%;
    position: relative;
	}
#owl-flats a{
	position: relative;
    display: table;
    height: inherit;
    width: 100%;
	}
#owl-flats .owl-item img{
	width: 92%;
    height: 92%;
    /* max-width: 800px; */
    /* max-height: 800px; */
    /* display: table-cell; */
    margin: 0 auto;
    -moz-user-select: none;
    transition: opacity 1s;
    object-fit: cover;
    vertical-align: bottom;
	}

#owl-thmbs .owl-item{background-color:#FFF;border:2px solid #f2f4f5;float:left;min-height:64px;max-height:180px;overflow:hidden;cursor:pointer;box-sizing:border-box;opacity:0.8}
#owl-thmbs .owl-item.center, #owl-thmbs .owl-item:hover, #owl-thmbs .owl-item:active{opacity:1}
#owl-thmbs .owl-item.center{border-top-color:#009cde;}
#owl-thmbs img{margin:0 auto;display:block;height:auto;width:100%; /*object-fit:cover;*/}