根据高度设置宽度

小编典典

根据高度设置宽度

css

我的元素：

<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';
};

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

阅读 339

2020-05-16

共1个答案

小编典典

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

当 高度相对于视口时 ：

您可以使用vh单位：

div {

  width: 75vh;

  height: 75vh;

  background:darkorange;

}


<div></div>

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

您可以使用具有所需纵横比的虚拟图像。宽高比为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>

请注意，此最后一个演示不会在调整窗口大小时更新。但是长宽比保持在页面负载上

UPDATE：
正如在注释设置中所报告的那样display:inline-flex:，#el似乎可以解决窗口大小调整方面的更新问题。

2020-05-16