CSS縮放高度以匹配寬度 - 可能與一個formfactor

我已經在twitterBootstrap基本的響應式設計網站中實現了GoogleMapsV3地圖。CSS縮放高度以匹配寬度 - 可能與一個formfactor

但我的問題很簡單：我有：

<div id="map"></map>

和

#map{ width: 100%; height: 200px }

我希望能夠改變高度的形狀因子。像這樣「在我的夢裏CSS」

#map { width: 100%; height: width * 1.72 }

我試圖離開了高度設置爲auto，各種persentages - 但只是爲了使div合攏對我始終。

我沒有問題，寫一個js的解決方案，但希望有一個簡單的cleancut CSS的解決方案，可能CSS3

如果沒有可能，這將是對js的我離開這個的最佳方式？（定時器，事件...等）

來源

2012-06-28 Steen

爲此，您將需要使用JavaScript，或者依賴於某種支持的calc() CSS表達式。

window.addEventListener("resize", function(e) { 
    var mapElement = document.getElementById("map"); 
    mapElement.style.height = mapElement.offsetWidth * 1.72; 
});

或者使用CSS計算（見支持位置：http://caniuse.com/calc）

#map { 
    width: 100%; 
    height: calc(width * 1.75) 
}

來源

2012-06-28 11:02:58 Greg

Calc is no-go - thanks for caniuse.com link。但js是完美的！ – Steen

+12

'height：calc（width * 1.75）'無效無效 –

直到我添加了一些單元，它才奏效： 'mapElement.style.height = Math.floor（mapElement.offsetWidth * 1.72）+' px';' – ajHurliman

讓我描述了JS的解決方案作爲一個單獨的答案：

function handleResize() 
{ 
    var mapElement = document.getElementById("map"); 
    mapElement.style.height = (mapElement.offsetWidth * 1.72) + "px"; 
} 

<div id="map" onresize="handleResize()">...</div>

（或動態註冊事件監聽器）。

mapElement.style.width * 1.72將不起作用，因爲它要求使用width DOM屬性或內聯樣式的width CSS屬性在元素上明確設置寬度。

來源

2012-06-28 11:07:33

這是。純粹的CSS。你確實需要一個額外的'容器'元素。

小提琴

~~（tinkerbin，實際上）： http://tinkerbin.com/rQ71nWDT~~ （Tinkerbin已經死了。）

的解決方案。

注我使用的是100％，在整個例子。你可以使用你想要的百分比。

由於高度百分比是相對於父元素的高度，所以我們不能依賴它。我們必須依靠別的東西。幸運的是，填充是相對於寬度的 - 無論是水平填充還是垂直填充。在padding-xyz: 100%中，100％等於箱子寬度的100％。

不幸的是，填充就是這樣，填充。內容框的高度爲0.沒問題！

堅持一個絕對定位的元素，給它100％的寬度，100％的高度，並將其用作您的實際內容框。 100％的高度是有效的，因爲絕對定位元素的百分比高度與它們相對定位的盒子的填充框相關。

HTML：

<div id="map_container"> 
    <div id="map"> 
    </div> 
</div>

CSS：

#map_container { 
    position: relative; 
    width: 100%; 
    padding-bottom: 100%; 
} 

#map { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
}

來源

2012-06-28 11:08:58 banzomaikaka

正是我想要的。但由於其他因素，我認爲，它不適用於我的環境（無論是在twitterbootstrap中，還是由於內容注入json）......並且由於greg有一個簡單的js ...我會去那個 – Steen

該死的;）JavaScript似乎也更容易。 – banzomaikaka

天才！非常簡單 - 也可以工作:) – JOM

我需要做的「流體」矩形不廣場....因此非常感謝JOPL ....沒有采取而是分鐘....

#map_container { 
    position: relative; 
    width: 100%; 
    padding-bottom: 75%; 
} 


#map { 
    position:absolute; 
    width:100%; 
    height:100%; 
}

來源

2013-08-01 23:13:27

你可以嘗試使用vw高度。 https://developer.mozilla.org/en/docs/Web/CSS/length

喜歡的東西

div#map { 
    width: 100%; 
    height: 60vw; 
}

這將在div的寬度設定爲視口寬度的60％。你可能會需要使用計算值來調整取填充到帳戶...

來源

2015-05-28 15:53:53 Pit

我其實認爲這應該是最好的答案，因爲它不涉及任何黑客或JavaScript。 – Aspelund

你能多解釋一下嗎？爲什麼不給這個div 60％的視圖寬度和100％的父寬度？ – LukeP

以下是視口單元的支持表。 http://caniuse.com/#feat=viewport-units –

在Jquery的

$('.img-responsive').each(function(){ 
     $(this).height($(this).width()); 
});

來源

2015-10-08 09:40:10 D3VELOPER

.video_frame { 
    width: 100%; 
    position: relative; padding-bottom: 56.25%; /* соотношение 16/9 */ 
} 

.video_frame iframe { 
    border: none; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
}

16：9

填充底= 100 /（寬度/（寬度/（16/9））），示例

padding-bottom = 100 /（640 /（640 /（16/9）））= 56.25％，

width = 640，height = 360，padding-bottom = 56.25％

來源

2017-08-01 07:37:42

CSS縮放高度以匹配寬度 - 可能與一個formfactor

回答

相關問題