宽度为 1920 后无法响应图像

Question

我正在努力让卡片翻转部分完全响应。我设法让所有的东西都正常工作并且响应迅速，但是当我达到 1920 像素的宽度时，它们就会卡住并分开并且不会扩大宽度。我不知道为什么，因为我将宽度等全部设置为 100%。非常感谢你们，我有点迷路了。

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

抱歉，我刚刚弄明白了：

我只需要添加：

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

非常感谢大家

Answer 2

看到了你的解决方案，请记住，通过将高度和宽度设置为 100%，你必须具有固定的图像方形比，如果图像是矩形，它将被拉伸。

这样设置可以避免：

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

宽度为 1920 后无法响应图像

Cant get images responsive after a width of 1920

javascript

flexbox

responsive-design

susy