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

Posted 2023-03-06

【中文标题】CSS缩放高度以匹配宽度 - 可能与外形尺寸

【英文标题】：CSS scale height to match width - possibly with a formfactor

【发布时间】：2012-06-29 21:08:10

【问题描述】：

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

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

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

和

#map width: 100%; height: 200px 

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

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

我尝试过忽略高度、设置为自动以及各种类型的参数 - 但只是为了让 div 总是在我身上塌陷。

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

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

【参考方案1】：

来了。纯 CSS。您确实需要一个额外的“容器”元素。

小提琴

（实际上是 tinkerbin）：http://tinkerbin.com/rQ71nWDT （小叮当死了。）

解决方案。

注意 我在整个示例中使用的是 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%;

【讨论】：

正是我想要的。但是由于我认为的其他因素，它在我的环境中不起作用（在 twitterbootstrap 中，或者由于内容是通过 json 注入的事实）......而且由于 greg 有一个简单的 js......我会去的

@JOPLOmacedo，您提供的链接现在已损坏。 :(

要将此示例更改为其他比例（例如 2:1），您只需更改 padding-bottom（在本例中为 50%）而不是 100% 的其他实例

不，它没有。你可能错过了一些小东西。在这里查看jsbin.com/moficipako/edit?html,css,output

这个答案不正确！填充是根据包含框计算的，即父框（参见：W3C）。所以它只适用于#map_container 的宽度为100% 的情况。如果您将#map_container 的宽度设置为固定宽度，例如250px 你会看到高度仍然等于父元素的宽度。

【参考方案2】：

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

类似

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

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

【讨论】：

你能再解释一下吗？为什么这不给 div 一个 60% 视图宽度的高度和一个 100% 的父级宽度？

这里是视口单位的支持表。 caniuse.com/#feat=viewport-units

@LukeP height: 60% 尝试* 将高度设置为 父元素高度 的 60%，而 height: 60vw 将高度设置为 视口宽度，所以它们是完全不同的。 （*仅当父级具有设定的高度时才有效，而不是让它保持在它需要的高度以包含它的子级，这通常是您想要做的）

【参考方案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)

【讨论】：

height: calc(width * 1.75) 无论如何都无效

在我添加了一些单位之前，它对我不起作用：mapElement.style.height = Math.floor(mapElement.offsetWidth * 1.72) + 'px';

height:calc (100vw * 1.75) 有效 - vw 表示视图宽度

@cyrille 175vw 还不够吗？！

我希望 calc(height * 2) 或 calc(width * 2) 有效

【参考方案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

【讨论】：

很遗憾，这不起作用。它只是在 div 的底部添加空间。

【参考方案5】：

试试视口

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

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

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

【参考方案6】：

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

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



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

【参考方案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;

【参考方案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 不起作用，因为它要求在元素上显式设置宽度，使用width DOM 属性或内联样式的width CSS 属性。

【参考方案9】：

用 Jquery 解决

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

【参考方案10】：

我用 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
            
          );
        

【参考方案11】：

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