css在肖像模式下與@media

我的css如下。我想要的是一種液體/液體（因爲缺乏正確的術語）css。我正在爲手機開發，當我從縱向視圖更改模式到陸地視圖時，我希望它流動得很好。眼下在css在肖像模式下與@media

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

圖像的土地視圖的偉大工程，但在縱向視圖它留下了很大的空間分隔圖像之後。如果我從css中取出！重要，那麼它會開始切斷圖像。從昨天開始一直在玩弄它。任何幫助將不勝感激

<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/

如果您的瀏覽器大或變小，你會看到的圖像會被截斷

來源

2013-05-14 Autolycus

幾件事...你的問題似乎已經被切碎了 - 不太清楚你最終的結果。其次，你可以設置一個小提琴嗎？ – Doug

加js小提琴問題。如果你移動瀏覽器並使其變大或變小，你會看到圖像將開始切斷或失去原創性http://jsfiddle.net/yYSke/ – Autolycus

我看到圖像切斷他們的肖像或風景（包括！重要的高度）。我也看不出有什麼差距。

以下是你的願望嗎？ 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; 
    }

存在該代碼可以清理等領域，但我認爲這給了你，你找什麼？

來源

2013-05-14 21:01:40

css在肖像模式下與@media

回答

相關問題