如何保持包含在視口內一個div同時保持縱橫比

存在一個正方形的div是任意％的寬（和相同的量高），其需要與窗口成比例。如何保持包含在視口內一個div同時保持縱橫比

它必須保持在可視區域的範圍內（即：沒有限外），並保持其方形 - 本質上覆制CSS的background-size: contain;功能。

我需要支持iOS Safari v3.2，所以我不能使用vw/vh/vmin/vmax，並且強烈更喜歡純CSS的解決方案。

enter image description here

來源

2013-08-18 Bryce

我以前有這個確切的問題，但真正有沒有一個簡單的答案。我希望有，這會讓我的生活變得更輕鬆。可能有些javascript或jquery可能是有序的。如果只有CSS有寬度：50％;高度寬度; – eshellborn

您可以在CSS中使用:after設置

DEMO http://jsfiddle.net/kevinPHPkevin/5tzk3/307/

.wrapper:after { 
    padding-top: 100%; /*Sets ratio*/ 
    display: block; 
    content: ''; 
}

說明：

這是通過將沒有內容:after，然後給DIV填充100％的頂部，從而推高了底部下。如果您將其更改爲padding-top: 56.25%;，則該比例將爲16：9。填充不會影響div的內容，因爲它被插入:after，並且只有與此元素中的:after相關聯的元素纔會受到影響。在這種情況下，沒有使用:after如你總是用一個新的div這一影響因素。

編輯

DEMO http://jsfiddle.net/kevinPHPkevin/5tzk3/309/

阻止它擴大，超出設定點max-width和max-height

.wrapper { 
    width: 50%; 
    display: inline-block; 
    position: relative; 
    max-height:350px; 
    max-width:350px; 
}

來源

2013-08-18 06:45:12 Vector

+1非常好，你能解釋那裏真的發生了什麼嗎？ – Shomz

不幸的是，這是不正確的。請注意，在演示中，如果將'.wrapper'寬度更改爲類似90％的大小並調整窗口大小，則正方形會開始被切斷，但無法處理。 – Bryce

@Shomz，謝謝，我添加了一個解釋。 – Vector

要在Vector的回答跟進關於裁剪底部：

如果你有機會到VW/v ...你能保證底部永遠不會被通過設置最大寬度剪裁成視高度的100％，並且最大高度是視口寬度的100％。

例如 max-width: 100vh; max-height: 100vw;

我知道原來的海報表示他們沒有訪問權限。只要指出這一點，如果你發現這個網頁就像我做了，並有權訪問。

來源

2017-05-15 17:32:04 haxius

如何保持包含在視口內一個div同時保持縱橫比

回答

相關問題