Невозможно получить изображения, реагирующие после ширины 1920

Question

Я изо всех сил пытаюсь получить полностью отклик. Мне удалось получить все работоспособное и отзывчивое, но как только я ударил ширину 1920px, их карты раздвигаются и не расширяются по ширине. Я не знаю, почему, так как я установил ширину и т. Д. Все на 100%. Спасибо большое, ребята, я немного потерян.

http://codepen.io/HendrikEng/pen/EgxamA

c-service { 
    padding-bottom: span(.5); 
} 

.c-service__title { 
    margin-top: span(.5); 
    margin-bottom: span(.5); 
} 

.c-service__item__icon { 
    position: relative; 
    top: 20%; 
    height: 120px; 
    padding-bottom: span(2); 
} 

.services__item__content { 
    position: absolute; 
     top: 50%; 
     left: 50%; 
     transform: translate(-50%, -50%); 
} 

.c-service__item--back p { 
    font-size: 1.2em; 
} 
.c-service__item--back h5 { 
    padding-top: 50px; 
} 
.c-service__item { 
    perspective: 1000px; 
    -webkit-perspective: 1000px; 
    -moz-perspective: 1000px; 
    -o-perspective: 1000px; 
    -ms-perspective: 1000px; 
    //display: flex; 
    //vertical-align: middle; 
} 
.c-service__item .c-service__item__content { 
    transition: 0.5s ease-out; 
    -webkit-transition: 0.5s ease-out; 
    -moz-transition: 0.5s ease-out; 
    -o-transition: 0.5s ease-out; 
    -ms-transition: 0.5s ease-out; 
    transform-style: preserve-3d; 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    -o-transform-style: preserve-3d; 
    -ms-transform-style: preserve-3d; 
    backface-visibility: visible; 
    -webkit-backface-visibility: visible; 
    -moz-backface-visibility: visible; 
    -o-backface-visibility: visible; 
    -ms-backface-visibility: visible; 
    display: flex; 
    position: relative; 
    width: 100%; 
    width: auto; 
} 
.c-service__item.applyflip .c-service__item__content { 
    transform: rotateY(180deg); 
    -webkit-transform: rotateY(180deg); 
    -moz-transform: rotateY(180deg); 
    -o-transform: rotateY(180deg); 
    -ms-transform: rotateY(180deg); 
} 
.c-service__item .c-service__item__content .c-service__item--static { 
    transition: 0s linear 0.17s; 
    -webkit-transition: 0s linear 0.17s; 
    -moz-transition: 0s linear 0.17s; 
    -o-transition: 0s linear 0.17s; 
    -ms-transition: 0s linear 0.17s; 
    transform: rotateY(0deg); 
    -webkit-transform: rotateY(0deg); 
    -moz-transform: rotateY(0deg); 
    -o-transform: rotateY(0deg); 
    -ms-transform: rotateY(0deg); 
    text-align: center; 
} 
.c-service__item.applyflip .c-service__item__content .c-service__item--static { 
    transition: 0s linear 0.17s; 
    -webkit-transition: 0s linear 0.17s; 
    -moz-transition: 0s linear 0.17s; 
    -o-transition: 0s linear 0.17s; 
    -ms-transition: 0s linear 0.17s; 
    transform: rotateY(-180deg); 
    -webkit-transform: rotateY(-180deg); 
    -moz-transform: rotateY(-180deg); 
    -o-transform: rotateY(-180deg); 
    -ms-transform: rotateY(-180deg); 
} 
.c-service__item .c-service__item__content .c-service__item--back { 
    background-color: blue; 
    color: white; 
    overflow: hidden; 
    position: absolute; 
    height:100%; 
    width: 100%; 
} 
.c-service__item .c-service__item__content .c-service__item--back, 
.c-service__item .c-service__item__content .c-service__item--front { 
    backface-visibility: hidden; 
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    -o-backface-visibility: hidden; 
    -ms-backface-visibility: visible; 
    overflow: hidden; 
    text-align: center; 
} 
.c-service__item .c-service__item__content .c-service__item--front, 
.c-service__item.applyflip .c-service__item__content .c-service__item--front { 
    transform: rotateY(0deg); 
    -webkit-transform: rotateY(0deg); 
    -moz-transform: rotateY(0deg); 
    -o-transform: rotateY(0deg); 
    -ms-transform: rotateY(0deg); 
} 
.c-service__item .c-service__item__content .c-service__item--back, 
.c-service__item.applyflip .c-service__item__content .c-service__item--back { 
    transform: rotateY(-180deg); 
    -webkit-transform: rotateY(-180deg); 
    -moz-transform: rotateY(-180deg); 
    -o-transform: rotateY(-180deg); 
    -ms-transform: rotateY(-180deg); 
} 
.c-service__item .c-service__item__content .c-service__item--front, 
.c-service__item.applyflip .c-service__item__content .c-service__item--back { 
    animation: stayvisible 0.5s both; 
    -webkit-animation: stayvisible 0.5s both; 
    -moz-animation: stayvisible 0.5s both; 
    -o-animation: stayvisible 0.5s both; 
    -ms-animation: donothing 0.5s; 
    -ms-transition: visibility 0s linear 0.17s; 
    visibility: visible; 
} 
.c-service__item .c-service__item__content .c-service__item--back, 
.c-service__item.applyflip .c-service__item__content .c-service__item--front { 
    animation: stayvisible 0.5s both; 
    -webkit-animation: stayvisible 0.5s both; 
    -moz-animation: stayvisible 0.5s both; 
    -o-animation: stayvisible 0.5s both; 
    -ms-animation: donothing 0.5s; 
    -ms-transition: visibility 0s linear 0.17s; 
    visibility: hidden; 
} 

@keyframes stayvisible { 
    from { 
     visibility: visible; 
    } 
    to { 
     visibility: visible; 
    } 
} 
@-webkit-keyframes stayvisible { 
    from { 
     visibility: visible; 
    } 
    to { 
     visibility: visible; 
    } 
} 
@-moz-keyframes stayvisible { 
    from { 
     visibility: visible; 
    } 
    to { 
     visibility: visible; 
    } 
} 
@-o-keyframes stayvisible { 
    from { 
     visibility: visible; 
    } 
    to { 
     visibility: visible; 
    } 
} 
@-ms-keyframes donothing { 
    0% {} 
    100% {} 
} 

Answer 1

видел ваше решение, держать в помните, что, установив высоту и ширину на 100%, вы должны иметь фиксированный квадрат e изображения, если изображение прямоугольное, оно будет растянуто.

Установите его так, чтобы избежать его:

.c-service__item--front { 
    min-height: 100%; 
    min-width: 100%; 
} 

Answer 2

К сожалению я только понял это:

я просто добавить:

.c-service__item--front { 
    height: 100%; 
    width: 100%; 
} 

Большое спасибо ребята