我想建立一個可以随着視窗寬度變化而改變其寬度/高度的div 。
是否有任何CSS3規則可以允許高度根據寬度而改變， 同時保持其長寬比 ？
我知道我可以通過JavaScript來做到這一點，但我甯願隻使用CSS。
#1樓
隻需為padding-bottom建立具有百分比值的包裝器
，如下所示：
div { width: 100%; padding-bottom: 75%; background: gold;
margin: 0 auto;
}
div.ar {
width:100%;
padding-bottom: 75%;
position:relative;
}
div.ar-inner {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}
我最近使用了類似于Elliot的圖像技巧的方法，以允許我使用CSS媒體查詢根據裝置分辨率提供不同的徽标檔案，但仍然像那樣自然地按比例縮放(我将徽标設定為背景圖像具有正确縱橫比的透明.png)。 但是Web_Designer的解決方案可以為我節省一個http請求。
#3樓
Elliot啟發了我這個解決方案-感謝：
aspectratio.png是一個完全透明的PNG檔案，大小與您喜歡的長寬比相同，在我的情況下為30x10像素。
的HTML
CSS3
.eyecatcher img {
width: 100%;
background-repeat: no-repeat;
background-size: 100% 100%;
background-image: url(../img/autoresized-picture.jpg);
}
請注意： background-size是css3的功能，可能不适用于您的目标浏覽器。 您可以檢查互操作性(位于caniuse.com上 )。
#4樓
如果整個容器結構是基于百分比的，則這将是預設行為，您能否提供一個更具體的示例？
以下是我的意思的示例，如果您的整個父級層次結構均基于％，則無需任何其他js / css即可進行任何浏覽器視窗調整，這是否可能與您的布局無關？
Content
#5樓
我找到了一種使用CSS進行此操作的方法，但是您必須小心，因為它可能會根據您自己網站的流量而變化。 我這樣做是為了将具有恒定縱橫比的視訊嵌入到我的網站的寬度部分中。
假設您有一個這樣的嵌入式視訊：
...
然後，您可以将其全部放入帶有“視訊”類的div中。 該視訊類可能是您網站中的流暢元素，是以，它本身沒有直接的高度限制，但是當您調整浏覽器的大小時，它的寬度将根據網站的流量而變化。 這可能是您在保持視訊的特定長寬比的同時嘗試擷取嵌入式視訊的元素。
為此，我将圖像放在“視訊”類div中的嵌入式對象之前。
!!! 重要的部分是圖像具有您希望保持的正确的寬高比。 另外，請確定圖像的大小至少與您希望視訊(或您要維護其AR)所依據的最小尺寸一樣大。 當按比例調整大小時，這将避免圖像分辨率中的任何潛在問題。 例如，如果您想保持3：2的長寬比，則不要僅使用3px x 2px的圖像。 它可能在某些情況下可以工作，但我尚未對其進行測試，是以避免使用它可能是一個好主意。
您應該已經為網站的流動元素定義了這樣的最小寬度。 如果不是這樣，最好這樣做是為了避免在浏覽器視窗變得太小時将元素切掉或重疊。 最好在某個時候有一個滾動條。 網頁應該獲得的最小寬度約為600像素左右(包括任何固定寬度的列)，因為除非您要與電話友好的網站打交道，否則螢幕分辨率不會變小。 !!!
我使用完全透明的png，但是如果您正确執行操作，我并不認為它最終會變得很重要。 像這樣：
...
現在，您應該能夠添加類似于以下内容的CSS：
div.video { ...; position: relative; }
div.video img.maintainaspectratio { width: 100%; }
div.video object { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
div.video embed {width: 100%; height: 100%; }
確定您還删除了對象内的任何顯式的高度或寬度聲明，并嵌入了複制/粘貼嵌入代碼通常随附的标簽。
它的工作方式取決于視訊類元素的位置屬性，并且您想要的項目保持一定的寬高比。 它利用了在元素中調整大小時圖像将保持其适當縱橫比的方式。 它通過将動态圖像的寬度/高度強制為要由圖像調整的視訊類别元素的100％，來告訴視訊類元素中的所有其他内容都可以充分利用動态圖像提供的不動産。
很酷吧？
您可能需要嘗試一下才能使其與您自己的設計一起使用，但這實際上對我來說效果很好。 這裡有一般概念。