内容消失在屏幕宽度659px

Question

如何维护控制背景的媒体查询以保持响应并使浏览器边缘适应边缘，同时不会丢失.content＆amp; img #flexiselDemo3的宽度为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
        ...