通过CSS设置基于高度的元素宽度

Question

我有一组元素,要求它们的最小宽度等于它们的高度,但未明确设置高度.目前我可以min-width通过jQuery 设置css 属性来实现这一点:

$(document).ready
(
    function()
    {
        $('.myClass').each
         (
             function() {$(this).css('min-width', $(this).css('height'));}
         );
    }
);  

是否可以直接在css中指定此行为？

这是一个展示我想要实现的目标:http://jsfiddle.net/p8PeW/

Answer 1

没有JS,这实际上是可能的!

关键是要使用a <img>,它是一个替换元素,因此如果你只设置高度,它的宽度将自动设置,以保持图像的固有宽高比.

因此,您可以执行以下操作:

<style>
  .container {
    position: relative;
    display: inline-block; /* shrink wrap */
    height: 50vh; /* arbitrary input height; adjust this */
  }
  .container > img {
    height: 100%; /* make the img's width 100% of the height of .container */
  }
  .contents {
    /* match size of .container, without influencing it */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
</style>

<div class="container">
  <!-- transparent image with 1:1 intrinsic aspect ratio -->
  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
  <div class="contents">
    Put contents here.
  </div>
</div>

如果你想要.contents4:3的宽高比,那么你应该将img的高度设置为133%,因此img的宽度因此.contents将是高度的133%.container.

1:4宽高比的现场演示:https://jsbin.com/juduheq/edit(附加代码注释).

另一个现场演示,其中容器的高度由兄弟元素中的文本量决定:https://jsbin.com/koyuxuh/edit

如果您想知道,img数据URI适用于1x1 px透明gif).如果图像的宽高比不是1:1,则必须相应地调整您设置的高度值.您也可以使用<canvas>或<svg>元素而不是<img>(谢谢Simo).

如果您想要根据宽度设置元素高度,那么使用CSS维护div的宽高比会有一个更容易的技巧.

Answer 2

现在，新aspect-ratio属性可以轻松做到这一点，并且在两种情况下都可以工作：

1. 高度基于宽度
2. 宽度基于高度

我们只需设置比率以及宽度或高度：

.box {
  height:80vh;
  background:red;
  aspect-ratio:9/6;
}

.box1 {
  width:50vw;
  background:green;
  aspect-ratio:9/6;
}

<div class="box">

</div>

<div class="box1">

</div>

Answer 3

我不相信没有 JS 这是可能的，但也许有人可以证明我错了？

CSS 不允许您使用动态变量，因此如果在页面加载之前未设置高度，我不确定如何做到这一点。