根据高度设置宽度[重复]答案

【问题标题】：Set width according to height [duplicate]根据高度设置宽度[重复]
【发布时间】：2015-04-17 20:19:19
【问题描述】：

我看到了高度取决于宽度的解决方案：css height same as width。或在这里：https://stackoverflow.com/a/6615994/2256981。但我的问题恰恰相反。

我的元素：

<body>
    <div id="square"></div>
</body>

风格：

body, html {
    margin: 0;
    height: 100%;
    min-height: 300px;
    position: relative;
}
div#square { /* My square. */
    height: 75%; /* It's height depends on ancestor's height. */
    width: 75vh; /* If supported, preliminarily sets it's width. */
    position: absolute; /* Centers it. */
    left: 50%; top: 50%; transform: translate(-50%, -50%);
    background-color: darkorange; /* Makes it visible. */
}

脚本，保持方正：

window.onload = window.onresize = function (event) {
    var mySquare = document.getElementById("square");
    mySquare.style.width = mySquare.offsetHeight + 'px';
};

完整代码在这里：http://jsfiddle.net/je1h/hxkgfr9g/

问题是用纯 CSS 做同样的事情。没有脚本。

【问题讨论】：

我不知道你是否可以在css中做到这一点。你可以试试css-tricks.com/snippets/css/a-guide-to-flexbox，但我不知道这对你有没有帮助。
这是否符合您的要求？ stackoverflow.com/questions/12899031/css-squares-on-resize
我也认为这在纯 CSS 中是不可能的，尝试了很多次......我们必须等待才能设计动态完美正方形！我看到的唯一选择是您实际编写的 Javascript。

标签： css aspect-ratio

【解决方案1】：

我知道有两种技术可以根据元素的高度来保持元素的纵横比：

当高度相对于视口：

您可以使用 vh 单位：

div {
  width: 75vh;
  height: 75vh;
  background:darkorange;
}

&lt;div&gt;&lt;/div&gt;

对于基于父元素高度的高度：

您可以使用具有所需纵横比的虚拟图像。纵横比为 1:1 的示例，您可以使用 1*1 透明 .png 图像或@vlgalik 评论的 1*1 base64 编码 gif：

html,body{
    height:100%;
    margin:0;
    padding:0;
}
#wrap{
    height:75%;
}
#el{
    display:inline-block;
    height:100%;
    background:darkorange;
}
#el img{
    display:block;
    height:100%;
    width:auto;
}

<div id="wrap">
    <div id="el">
        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
    </div>
</div>

请注意，最后一个演示不会在调整窗口大小时更新。但是纵横比在页面加载时保持不变

更新：
正如the comments 中报告的那样，在#el 上设置display:inline-flex: 似乎解决了窗口调整大小问题的更新。

【讨论】：

或者您可以使用 Base64 编码的 1x1px 透明 GIF ，或内联 SVG（但在 FF 和带有 SVG 的旧浏览器）。
@vlgalik 很好，我更新了答案。
感谢您的回答。这是一个有趣的 hack，老实说，我并没有完全弄清楚它是如何工作的 :) 为什么我们需要'#wrap'，确切地说。正如你所说，不幸的是它不会在调整窗口大小时更新“#el”宽度。
@jevgenij #wrap 不是必需的，它是用于演示的，以表明您可以根据父级 (#wrap) 的高度保持纵横比。
好的，我现在明白了，刚刚纠结了:) 也发现display:inline-flex; for #el 解决了更新问题，但当然它也给我们带来了兼容性问题。

【解决方案2】：

编辑：错过了你想根据高度设置宽度，这正好相反:(

要支持所有比率，您可以使用padding-bottom。 padding-bottom 中的百分比总是相对于元素的宽度：

/* the wrapper has a width */
.wrapper {
  position: relative;
  width: 25%;
  margin-bottom: 10px;
}
/* these elements set the height (using padding-bottom) */
.square {
  padding-bottom: 100%;
  position: relative;
}
.widescreen {
  padding-bottom: 56.25%; /* 9/16 = 0.5625 */
}

/* 
 * This is the content. 
 * Needs position:absolute to not add to the width of the parent 
 */
.content {
  /* fill parent */
  position: absolute;  
  top: 0; bottom: 0;
  left: 0; right: 0;
  
  /* visual */
  padding: 10px;
  background: orange;
  color: white;
}

<div class="wrapper">
  <div class="square">
    <div class="content">square</div>
  </div>
</div>

<div class="wrapper">
  <div class="widescreen">
    <div class="content">16:9 ratio</div>
  </div>
</div>

唯一的缺点是，你需要一堆包装元素。

【讨论】：

我们根据高度而不是根据宽度来寻找宽度。