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

回答

相关问题