jquery - 内容在屏幕宽度 659px 处消失

Question

我如何维护控制背景的媒体查询以保持响应并适应浏览器边缘到边缘，同时不丢失 .content & img in #flexiselDemo3 at width 659px .content 和 #flexiselDemo3 中的 img 消失了吗？

https://codepen.io/fjenpen/pen/pROPov

body {
    text-align: center;
    text decoration: none;
    color: #ffffff;
    font-family: arial;
    margin: 0px 0px 0px 0px;
}
@media only screen and (max-width: 658px) {
    .bg {
        height: 100%;
        width: auto;
        background-image: url("http://media.istockphoto.com/photos/repairing-lawn-    mower-engine-picture-id500782948");
        background-repeat: no-repeat;
        margin: 0px 0px 0px 0px;
        padding: 0;
        display: inline-block;
        text-align: center;
        text decoration: none;
        color: #ffffff;
        font-family: arial;
        margin: 0px 0px 0px 0px;
    }
}
@media only screen and (min-width: 659px) {
    .bg {
        width: 100%;
        display: inline-block;
        background-image: url("http://media.istockphoto.com/photos/repairing-lawn-    mower-engine-picture-id500782948");
        background-repeat: no-repeat;
        background-size: 100% auto;
        text-align: center;
        text decoration: none;
        color: #ffffff;
        font-family: arial;
        margin: 0px 0px 0px 0px;
    }
}

Answer 1

你的问题的核心是你给 .bg 显示 inline-block。

@media only screen and (max-width: 658px) {
    .bg {
        ...
        display: inline-block; <- get rid of this
        ...