Question

我正在尝试解决我想要一个方形元素从页面高度获取其边缘大小的问题。换句话说，我想将元素的宽度绑定到它的高度。

我知道这可以通过other way round实现，我也可以使用vh，但我这样做是为了练习。

我的方法是利用img标签可以保持所显示图像的宽高比的事实。我想出了以下html（img标签嵌入了1x1px gif）：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css"/>
    </head>
    <body>
        <div class="circle-tree">
            <div class="circle-tree-wrap">
                <!-- Play with img tag to get an element that adjusts its width to its height -->
                <img src="data:image/gif;base64,R0lGODdhAQABAIAAAP///////ywAAAAAAQABAAACAkQBADs=">
                <div class="circle-tree-content"></div>
            </div>
        </div>
    </body>
</html>

与此同时，我写了这个CSS：

html, body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%; }

body {
  background-color: #64d0ac; }

.circle-tree {
  display: inline-block;
  height: 100%;
  width: 100%;
  transform: translateX(50%); }
  .circle-tree .circle-tree-wrap {
    position: relative;
    display: inline-block;
    transform-style: preserve-3d;
    height: 100%; }
    .circle-tree .circle-tree-wrap .circle-tree-content {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #fff;
      top: 0;
      left: 0;
      transform: translateX(-50%); }
    .circle-tree .circle-tree-wrap img {
      height: 100%;
      width: auto;
      opacity: 0;
      transform: translateX(-50%); }

这在我最初加载页面时有用（.circle-tree-content是正方形且高度为100％）。但是，当我调整浏览器窗口大小时，.circle-tree-wrap不会将其宽度调整为img元素的新宽度。另一个重新加载修复它。我在Chromium 43和Firefox 38中对此进行了测试。我知道你可能不想在生产中这样做，我最终可能会使用其他解决方案（或JS）。

但是因为我发现这种行为非常特殊，所以我想在这里询问是否有人可以向我解释为什么在调整大小和页面加载时CSS的计算方式不同。提前谢谢！

Answer 1

它似乎与浏览器如何计算＆＃34; shrink-to-fit＆＃34;或＆＃34;首选＆＃34;未声明特定宽度值时内联元素的宽度。我假设当浏览器调整大小时，图像周围的容器div的宽度没有被正确重新计算，因为图像元素不会创建类似于文本的换行符。请参阅下面的代码示例或此fiddle并缩小窗口宽度。你会看到.circle-tree-wrap div元素的宽度缩小以适应文本，当它破坏线条而不是图像时。

＆＃13;

html, body {
    margin: 0;
    width:100%; height:100%;
    background-color:black;
}
.circle-tree-wrap {
    display: inline-block;
    height: 100%;
    width:auto;
    background-color:grey;
}
img {
    vertical-align:top;
    height: 100%;
    width: auto;
    opacity:0.7;
}
em {
    vertical-align:top;
    height:100%;
    width:auto;
    color:green;
}

＆＃13;

<div class="circle-tree-wrap">
    <!-- Play with img tag to get an element that adjusts its width to its height -->
    <img src="data:image/gif;base64,R0lGODdhAQABAIAAAP///////ywAAAAAAQABAAACAkQBADs="/>
</div>
<div class="circle-tree-wrap"><em>some text to fill the space</em>
<div>

＆＃13;

为什么CSS边界仅在页面加载时正确计算？

1 个答案: