html - CSS缩放高度以匹配宽度 - 可能与外形尺寸

Question

我在 twitterBootstrap 基本响应式设计站点中实现了 GoogleMapsV3 地图。

但我的问题很简单：我有：

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

和

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

我希望能够将高度更改为外形尺寸。就像在这个“我梦中的 CSS”中

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

我试过省略高度，设置为自动，以及各种 persentages - 但只是为了让 div 总是在我身上崩溃。

我写一个 js 解决方案没有问题，但希望有一个简单的干净的 CSS 解决方案，可能是 CSS3

如果不可能，那么让我摆脱这种情况的最佳方法是什么？（定时器，事件...或类似）

Answer 1

这里是。纯 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%;
}

Answer 2

您可以尝试使用vw高度。 https://developer.mozilla.org/en/docs/Web/CSS/length

就像是

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

这会将 div 的宽度设置为视口宽度的 60%。您可能需要使用 calc 进行调整以将填充考虑在内……</p>

Answer 3

为此，您将需要使用 JavaScript，或依赖某种受支持的calc()CSS 表达式。

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

或使用 CSS calc（请参阅此处的支持：http: //caniuse.com/calc）

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

Answer 4

.video {
    width: 100%;
    position: relative;
    padding-bottom: 56.25%; /* ratio 16/9 */
}

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

16:9

填充底部 = 9/16 * 100 = 56.25

Answer 5

尝试视口

您可以使用宽度数据并相应地计算高度

此示例适用于 150x200 像素的图像

width: calc(100vw / 2 - 30px);
height: calc((100vw/2 - 30px) * 1.34);

Answer 6

我需要做“流体”矩形而不是正方形....所以感谢 JOPL .... 只花了一分钟....

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


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

Answer 7

你可以设置它的before和after来强制一个恒定的宽高比

HTML：

<div class="squared"></div>

CSS：

.squared {
  background: #333;
  width: 300px; 
}
.squared::before {
  content: '';
  padding-top: 100%;
  float: left;
}
.squared::after {
  content: '';
  display: block;
  clear: both;
}

Answer 8

让我将 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将不起作用，因为它要求在元素上显式设置宽度，使用widthDOM 属性或内联样式的widthCSS 属性。

Answer 9

我用 YouTube 的 IFRAME 做了类似的事情，其中​​ iframe 位于始终根据纵向/横向更改的网格内，因此此代码适用于：

所以这个问题的代码是：

// Layout resize
let height = window.innerHeight;
let width = window.document.getElementById('player').parentNode.clientWidth;
    height = width / 1.77;

<div id="player"></div>

... etc ..

function onYouTubeIframeAPIReady() {
          // Layout resize
          let height = window.innerHeight;
          let width = window.document.getElementById('player').parentNode.clientWidth;
              height = width / 1.77;

          player = new YT.Player('player', {
            width: '100%',
            height: height,            
            videoId: currentVideoId,
            playerVars: {
              'autoplay': 0,
              'loop': 0,
              'mute': 0,
              'controls': 0,
              'enablejsapi': 1,
              'playsinline': 0,
              'rel': 0,
              'widget_referrer': 'http://my domain ...'
            },
            events: {
              'onReady': onPlayerReady,
              'onStateChange': onPlayerStateChange,
              'onError': onError
            }
          });
        }

Answer 10

使用 Jquery 的解决方案

$(window).resize(function () {
    var width = $("#map").width();
    $("#map").height(width * 1.72);
});

Answer 11

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