保持比例寬度和高度的元素

-2

在html中，當您有圖像並將其設置爲100％寬度時，此元素的高度會自動保持相稱。我正在尋找可以在沒有圖像的情況下模仿此功能的元素。我正在考慮使用透明的圖像，但這似乎是應該與CSS可能的東西。保持比例寬度和高度的元素

不找一個JavaScript解決方案

來源

2014-02-06 ThomasReggi

你試過了什麼樣的代碼？ – Riskbreaker

@破壞者我不認爲這是可能的，所以沒有。 – ThomasReggi

背景覆蓋是我的想法，但鑑於這是一個圖像... – Riskbreaker

找到了解決辦法here不可能的。

我用開水下來到這個http://jsfiddle.net/47amX/

<style> 
.scaling-img { 
    position: relative; 
    visibility: hidden; 
    width: 100%; 
    min-width: 100%; 
} 

.outer { 
    margin:10px; 
    max-height:340px; 
    max-width:340px; 
    position: relative; 
    outline: 1px solid grey; 
} 
</style> 

<div class="outer"> 
    <img class="scaling-img" src="data:image/gif;base64,R0lGODlhAQABAIAAAP7//wAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" /> 
</div>

來源

2014-02-06 20:04:40 ThomasReggi

答案：這是沒有圖像或JavaScript

來源

2014-02-06 19:56:13

正確的做法是將所有的圖像都固定在一個固定的尺寸上會很痛苦。我發現了一個css解決方案，可以讓我用像素值製作圖像。 – ThomasReggi

這是possible新推出的viewport percentage lengths（有一些限制）。

div { 
    background-color: peru; 
    height: 20vw; 
    width: 20vw; 
}

有四種可能的單位：

1vh - 視口的高度相對於百分之一。
1vw - 與上面相同，但相對於視口的寬度。
- 這等於vh或vw，以較小者爲準。
1vmax - 與上述相同，但等於任vh或vw

最大唯一需要注意的是browser support。直到在IE9 +中支持IE11和vh和vw長度，但最近纔在移動瀏覽器中實現時，才支持vmin & vmax單元。 iOS7顯然也有渲染vh單元的問題。

來源

2014-02-06 20:11:40 Shiva

甚至沒有知道這一點，感謝把它引起我的注意！ – ThomasReggi

保持比例寬度和高度的元素

回答

相關問題