Html CSS 缩放高度以匹配宽度 - 可能具有形状因子
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11243075/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS scale height to match width - possibly with a formfactor
提问by Steen
I have implemented a GoogleMapsV3 map in a twitterBootstrap basic responsive design site.
我已经在 twitterBootstrap 基本响应式设计站点中实现了 GoogleMapsV3 地图。
But my question is quite simple: i have:
但我的问题很简单：我有：
<div id="map"></map>
and
和
#map{ width: 100%; height: 200px }
I'd like to be able to change the height to a form factor. Like in this "in my dreams CSS"
我希望能够将高度更改为外形尺寸。就像在这个“在我梦中的 CSS”中
#map { width: 100%; height: width * 1.72 }
I have tried leaving out height, setting to auto, and all sorts of persentages - but only to make the div collapse on me always.
我试过省略高度，设置为自动，以及各种形式 - 但只是为了让 div 总是在我身上崩溃。
I have no problem writing a js-solution, but hope for a simple cleancut CSS solution, possible CSS3
我写一个 js 解决方案没有问题，但希望有一个简单的干净的 CSS 解决方案，可能是 CSS3
If not possible, what would be the optimal way to js me out of this?? (timers, events...or the like)
如果不可能，那么让我摆脱困境的最佳方法是什么？（计时器、事件……或类似的）
采纳答案by Greg
For this, you will need to utilise JavaScript, or rely on the somewhat supported calc()CSS expression.
为此，您将需要使用 JavaScript，或依赖某种支持的calc()CSS 表达式。
window.addEventListener("resize", function(e) {
var mapElement = document.getElementById("map");
mapElement.style.height = mapElement.offsetWidth * 1.72;
});
Or using CSS calc (see support here: http://caniuse.com/calc)
或使用 CSS calc（请参阅此处的支持：http: //caniuse.com/calc）
#map {
width: 100%;
height: calc(100vw * 1.72)
}
回答by banzomaikaka
Here it is. Pure CSS. You do need one extra 'container' element.
这里是。纯 CSS。您确实需要一个额外的“容器”元素。
The fiddle
小提琴
(tinkerbin, actually): http://tinkerbin.com/rQ71nWDT(Tinkerbin is dead.)
（小叮当，实际上）：http://tinkerbin.com/rQ71nWDT（小叮当死了。）
The solution.
解决方案。
NoteI'm using an 100% throughout the example. You can use whichever percentage you'd like.
注意我在整个示例中使用了 100%。您可以使用任何您喜欢的百分比。
Since height percentages are relative to the height of the parent element, we can't rely on it. We must rely on something else. Luckily padding is relative to the width - whether it's horizontal or vertical padding. In padding-xyz: 100%, 100% equals 100% of the box's width.
由于高度百分比相对于父元素的高度，我们不能依赖它。我们必须依靠别的东西。幸运的是填充是相对于宽度的——无论是水平填充还是垂直填充。在 中padding-xyz: 100%，100% 等于框宽度的 100%。
Unfortunately, padding is just that, padding. The content-box's height is 0. No problem!
不幸的是，填充就是填充。内容框的高度为 0。没问题！
Stick an absolutely positioned element, give it 100% width, 100% height and use it as your actual content box. The 100% height works because percentage heights on absolutely positioned elements are relative to the padding-box of the box their relatively positioned to.
粘贴一个绝对定位的元素，给它 100% 的宽度，100% 的高度并将其用作您的实际内容框。100% 高度有效是因为绝对定位元素上的百分比高度是相对于它们相对定位的框的填充框。
HTML:
HTML：
<div id="map_container">
<div id="map">
</div>
</div>
CSS:
CSS：
#map_container {
position: relative;
width: 100%;
padding-bottom: 100%;
}
#map {
position: absolute;
width: 100%;
height: 100%;
}
回答by Pit
You could try using vwfor height.
https://developer.mozilla.org/en/docs/Web/CSS/length
您可以尝试使用vw高度。
https://developer.mozilla.org/en/docs/Web/CSS/length
Something like
就像是
div#map {
width: 100%;
height: 60vw;
}
This would set the width of the div to 60% of the viewport width. You will probably need to use calc to adjust to take padding into account …
这会将 div 的宽度设置为视口宽度的 60%。您可能需要使用 calc 进行调整以将填充考虑在内……
回答by Pax Exterminatus
.video {
width: 100%;
position: relative;
padding-bottom: 56.25%; /* ratio 16/9 */
}
.video iframe {
border: none;
position: absolute;
width: 100%;
height: 100%;
}
16:9
16:9
padding-bottom = 9/16 * 100 = 56.25
填充底部 = 9/16 * 100 = 56.25
回答by Stavros
Try viewports
尝试视口
You can use the width data and calculate the height accordingly
您可以使用宽度数据并相应地计算高度
This example is for an 150x200px image
此示例适用于 150x200 像素的图像
width: calc(100vw / 2 - 30px);
height: calc((100vw/2 - 30px) * 1.34);
回答by Bill Warren
I need to do "fluid" rectangles not squares.... so THANKS to JOPL .... didn't take but a minute....
我需要做“流体”矩形而不是正方形......所以感谢JOPL......只花了一分钟......
#map_container {
position: relative;
width: 100%;
padding-bottom: 75%;
}
#map {
position:absolute;
width:100%;
height:100%;
}
回答by Pierre Olivier Tran
You can set its beforeand afterto force a constant width-to-height ratio
您可以设置它before和after强制一个恒定的宽高比
HTML:
HTML：
<div class="squared"></div>
CSS:
CSS：
.squared {
background: #333;
width: 300px;
}
.squared::before {
content: '';
padding-top: 100%;
float: left;
}
.squared::after {
content: '';
display: block;
clear: both;
}
回答by Alexander Pavlov
Let me describe the JS solution as a separate answer:
让我将 JS 解决方案描述为单独的答案：
function handleResize()
{
var mapElement = document.getElementById("map");
mapElement.style.height = (mapElement.offsetWidth * 1.72) + "px";
}
<div id="map" onresize="handleResize()">...</div>
(or register the event listener dynamically).
（或动态注册事件监听器）。
mapElement.style.width * 1.72will not work, since it requires that the width be set explicitly on the element, either using the widthDOM attribute or in the inline style's widthCSS property.
mapElement.style.width * 1.72将不起作用，因为它要求使用widthDOM 属性或内联样式的widthCSS 属性在元素上显式设置宽度。
回答by Anand agrawal
Solution with Jquery
用 Jquery 解决
$(window).resize(function () {
var width = $("#map").width();
$("#map").height(width * 1.72);
});
回答by Thanh Nh?t
#map {
width: 100%;
height: 100vw * 1.72
}
