2016-05-08 169 views
4

有沒有一種方法可以在沒有JavaScript的CSS中實現這一點?固定寬高比div,受視口約束,居中,最大寬度和高度

我想與下列要求一個div:

  • 它始終保持一個給定的縱橫比(例如4:3)
  • 其寬度決不會超過在PX給定的固定的最大,例如800px
  • 其高度從未超過給定的固定最大值,例如, 600px的
  • 其尺寸不能超過那些視
  • 它的大,因爲它,即可獲得上述約束
  • 它爲中心的垂直和水平

換句話說,它應填寫無論是視口寬度或高度,以較高者爲準,同時保持給定的寬高比;除非這超過了固定的最大寬度和/或高度,在這種情況下,它將受到限制。

我不在乎需要多少個包裝在另一個裏面。

我知道this answer提供了由父寬度限制的固定寬高比的解決方案,並且可以很容易地添加一個帶有額外包裝的固定最大寬度約束;但我似乎無法看到一種方法來適應增加高度限制。

+0

附上預期結果的圖紙可能會幫助 –

+0

@Fez Vrasta認真嗎?我認爲要求清單非常清晰,完全沒有歧義。 – matteo

+0

我想你可以自己判斷答案的數量。如果你想要一個好的答案,你需要提出一個好問題。 –

回答

0

我會推薦css flex屬性。它使您能夠集中具有display: flex屬性的父元素的子元素。非常漂亮。您可以按照以下方式實現水平/垂直居中。

這裏是負有維護長寬比說明另一篇文章: Maintain the aspect ratio of a div with CSS

html, body { 
    height: 100%; 
    width: 100%; 
    overflow: hidden; 
    margin: 0; 
    padding: 0; 
} 

.center { 
    display: flex; 
    justify-content: center; 
    align-content: center; 
    align-items: center; 
    align-self: center; 
    flex: 1 0 auto; 
    height: 100%; 
    width: 100%; 
} 

.center > div { 
    align-self: auto; 
    background-color: #aaa; 
} 

.container { 
    width: 100%; 
    padding-bottom: 75%; /* achieves 4:3 aspect ratio */ 
    margin: 0 20px; 
    background-color: yellow; 
} 

.centered { 
    max-width: 800px; 
    max-height: 600px; 
    width: 100%; 
    height: 100%; 
} 
<!-- ... --> 
<div class='center'> 

    <div class='container'> 

     <!-- ensure your .centered div has 
     some specified height & width --> 
     <div class='centered'> 
      Your content 
     </div> 

    </div> 

</div> 
<!-- ... --> 

JSBin Demo Here

+0

我很感激幫助,但這隻解決了居中和固定寬高比。它不受父母身高的限制,只限於寬度。此外,它會以某種方式在頁面底部生成大量額外的空白空間,導致頁面增長並出現垂直滾動條。並且在右側還有幾個像素的額外空間,導致水平滾動條也出現。我懷疑後者有關於HTML,body {width:100%;身高和100%}(身體和HTML有一些奇怪的) – matteo

+0

http://output.jsbin.com/netidoc – matteo

+0

嗯,實際上它會受到高度的限制(一部分來自滾動條和/或滾動條引起的小錯誤身體邊際),但是當它確實時,它會失去寬高比。 – matteo

1

我不認爲最大高度是可行的,但我能得到其餘的工作。 http://codepen.io/syren/pen/PNvorN

@mixin aspect-ratio($width, $height) { 
    position: relative; 
    max-width:400px; 
    margin: 0 auto; 
    display: block; 

    &:before{ 
     display: block; 
     content: " "; 
     width: 100%; 

     padding-top: ($height/$width) * 100%; 
    } 

    > .content { 
     position: absolute; 
     top: 0; 
     left: 0; 
     right: 0; 
     bottom: 0; 
    } 
} 

.sixteen-nine { 
    @include aspect-ratio(16,9); 
} 

您可以做,你改變長寬比工作的設備在頂部和底部會得到切斷的方式有些媒體查詢魔術。當你將高度設置爲0時,你不能做最大高度,但是如果你將寬度設置爲0並且填充 - 留下而不是填充頂部或底部,並且反轉數學,那麼這可能會起作用。你可以通過媒體查詢來做到這一點。我現在完全試用它,但我必須重新開始工作。

我發現了更多的資源,可能會導致你在某個地方。

Maintaining aspect ratio with min/max height/width? https://dev.opera.com/articles/css3-object-fit-object-position/

祝你好運!

相關問題