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%; 
} 

おかげでたくさんの男