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

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

I see that the images are cut off, be they portrait or landscape (with the !important height included). I also see no gaps.

Is the following what you desire? http://jsfiddle.net/yYSke/2/show/

First of all I changed the background images so they have 100% height, and an auto width to keep the aspect ratio. I then set them to be centred in the element:

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

I also stripped out some of the code in your media queries as you're just repeating what you already have in the base styles.

Now you'll notice that the image in parentDivision-separator-middle is too large to fit inside the container without being cut off or overlapping. That is because the height set on parentDivision-separator-middle is smaller than childDivision7 where you set the image. I avoided that by setting the height to inherit:

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

There are other areas where the code could be cleaned up, but I think this gives you what you're looking for?