带有@media的纵向模式和陆地模式的CSS

Question

我有下面的 CSS。我想要的是一种流体/液体(因为缺乏正确的术语)css。我正在为移动设备开发，当我改变模式时 从纵向 View 到陆地 View ，我希望它流畅。现在的图像

<div class="parentDivision-separator-middle" style="margin-top: 3px;"><div class="image childDivision7"></div>

在陆地 View 中效果很好，但在纵向 View 中，它在分隔符图像之后留下了很多空间。如果我从 css 中取出 !important 然后它开始切断图像。从昨天开始就一直在胡闹。任何帮助将不胜感激

<style>

    div.parentDivision {
        margin-top:2px;
    }
    div.parentDivision div {
        height:281px;
        background-size: 100%;
        background-repeat: no-repeat;
    }

    @media screen and (max-width: 480px) {
        div.parentDivision div {
            height:151px;
            background-size: 100%;
            background-repeat: no-repeat;
        }
        div.parentDivision-separator-middle {
            height:151px ;
            background-size: 100%;
            background-repeat: no-repeat;
        }
    }
    @media screen and (max-width: 320px) {
        div.parentDivision div {
            height:151px !important;
            background-size: 100%;
            background-repeat: no-repeat;
        }
        div.parentDivision-separator-middle {
            height:151px  !important;
            background-size: 100%;
            background-repeat: no-repeat;
        }

    }
    div.parentDivision-separator-middle {
        height:165px  !important;
        background-size: 100%;
        background-repeat: no-repeat;
    }
    div.parentDivision .childDivision1 {
        background-image:url(http://www.bryantsmith.com/blog/wp-content/uploads/2011/10/cssediter1.png);
    }
    div.parentDivision .childDivision2 {
        background-image:url(http://www.bryantsmith.com/blog/wp-content/uploads/2011/10/cssediter1.png);
    }
    div.parentDivision .childDivision3 {
        background-image:url(http://www.bryantsmith.com/blog/wp-content/uploads/2011/10/cssediter1.png);
    }
    div.parentDivision .childDivision4 {
        background-image:url(http://www.bryantsmith.com/blog/wp-content/uploads/2011/10/cssediter1.png);
    }
    div.parentDivision .childDivision5 {
        background-image:url(http://www.bryantsmith.com/blog/wp-content/uploads/2011/10/cssediter1.png);
    }
    div.parentDivision .childDivision6 {
        background-image:url(http://www.bryantsmith.com/blog/wp-content/uploads/2011/10/cssediter1.png);
    }
    div.parentDivision .childDivision7 {
        background-image:url(http://www.bryantsmith.com/blog/wp-content/uploads/2011/10/cssediter1.png);
    }
    div.image {
        margin: 1px;
    }
    div.parentDivision-separator-left {
        float: left;
        width: 49%;
        overflow: hidden;
    }
    div.parentDivision-separator-right {
        float: left;
        width: 49%;
        overflow: hidden;
        margin-left: 2%;
    }

    div.parentDivision-separator-middle {
        float: left;
        width: 100%;
        overflow: hidden;
    }
    div.parentDivision-separator div.image {
        padding: 2px;
    }



</style>


<div class="list-wrapper parentDivision">
    <div class="parentDivision-separator-left"><div class="image childDivision1"></div></div>
    <div class="parentDivision-separator-right"><div class="image childDivision2"></div></div>
</div>
<div class="list-wrapper parentDivision">
    <div class="parentDivision-separator-middle" style="margin-top: 3px;"><div class="image childDivision7"></div></div>
</div>
<div class="list-wrapper parentDivision">
    <div class="parentDivision-separator-left"><div class="image childDivision3"></div></div>
    <div class="parentDivision-separator-right"><div class="image childDivision4"></div></div></div>
</div>
<div class="list-wrapper parentDivision">
    <div class="parentDivision-separator-middle" style="margin-top: 3px;"><div class="image childDivision7"></div></div>
</div>
<div class="list-wrapper parentDivision">
    <div class="parentDivision-separator-left"><div class="image childDivision5"></div></div>
    <div class="parentDivision-separator-right"><div class="image childDivision6"></div></div>
</div>

这是jsfiddle

http://jsfiddle.net/yYSke/

如果您将浏览器变大或变小，您会看到图像被截断

Answer 1

我看到图像被截断了，无论是纵向还是横向(包括 !important 高度)。我也看不到任何差距。

以下是您想要的吗？ http://jsfiddle.net/yYSke/2/show/

首先，我更改了背景图像，使它们具有 100% 的高度和自动宽度以保持纵横比。然后我将它们设置为在元素中居中:

div.parentDivision div {
    height:281px;
    background-size: auto 100%;
    background-repeat: no-repeat;
     background-position: center;
}

我还删除了媒体查询中的一些代码，因为您只是在重复基本样式中已有的代码。

现在您会注意到 parentDivision-separator-middle 中的图像太大而无法在不被切断或重叠的情况下放入容器中。这是因为在 parentDivision-separator-middle 上设置的高度小于设置图像的 childDivision7。我通过将高度设置为继承来避免这种情况:

div.parentDivision .childDivision7 {
        background-image:url(http://www.bryantsmith.com/blog/wp-content/uploads/2011/10/cssediter1.png);
        height: inherit;
    }

还有其他可以清理代码的区域，但我认为这可以满足您的需求？