Question

我有下面的CSS。我想要的是液体/液体（缺乏正确的术语）css。我正在开发移动设备，当我改变模式时从纵向视图到陆地视图，我希望它能很好地流动。现在是

中的图像

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

适用于陆地视图，但在纵向视图中，它会在分隔符图像后留下大量空间。如果我从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

我看到图像被截断，无论是肖像还是风景（包括！重要高度）。我也看到没有差距。

以下是你想要的吗？ 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;
    }

还有其他方面可以清理代码，但我认为这可以为您提供所需的内容？

使用@media以纵向模式和陆地模式进行css

1 个答案: