0

像许多其他人一样，我最初的问题是保持 DIV A 具有固定的纵横比（纯 CSS/无 JS）。它旨在在任何父 DIV B 中重复使用，无论 B 的大小如何。DIV A 应适合 B 的最小大小。

具有固定纵横比的 DIV

在此动画中，您可以看到始终为正方形且适合最外层 div 最小尺寸的 RED div。

没有使用 vh 或 vw 或 vmin 或 vmax ，我不想使用它们中的任何一个，因为 vh 有时不能更可靠地真正表示视口高度（请参阅CSS3 100vh not constant in mobile browser）

为此，我使用了具有固定纵横比（此处为 1/1）的图像（灰色矩形），该图像会扩展以适合其父级。它的工作原理如下：

  • 1）#container（粉红色虚线细边框）是最外层的 DIV。它可以是完整的视口或具有给定大小的任何 DIV。尺寸 = 高 x 宽
  • 2）#widthwrapper（蓝色边框）高度为H（高度：100%）。它包装了img。
  • 3）#imgwrapper 是图像（大灰色矩形）。它的高度也是H（高度：100%）。因为它是一个正方形，它的宽度 = H。
  • 4) #widthwrapper 包裹了img，它的基本宽度是：fit-content = img width = H。因为它的max-width = 100%，所以你有#widthwrapper width = min(H, contW)。所以#widthwrapper 如 wxh = min(H, contW) x H。#widthwrapper si 也是位置：相对。
  • 5) #content 是位置：绝对在#widthwrapper 旁边，占用与#widthwrapper 相同的空间。所以#content就是如wxh = min(H, contW) x H。
  • 6) #contentwrapper（红色虚线）在#content 中垂直居中。使用 padding-bottom hack，它是一个宽度 = 100% 的正方形。所以#contentwrapper 的维度是 wxh = min(H, contW) x min(H, contW)。

    • <html>
<head>
<style>
#container {top: 5px;left: 5px;right: 5px;bottom: 5px;position: fixed;border: 1px dashed pink;}
*, *:before, *:after {box-sizing: content-box;}
#widthwrapper {height: 100%;min-height:100%;max-height:100%;max-width: 100%;margin: auto;width: -moz-fit-content; width: -webkit-fit-content; width: fit-content;position: relative;outline: 1px solid blue;border: 1px dashed blue;}
#imgwrapper {height: 100%;min-height: 100%;max-height: 100%;}
#content {position: absolute;top: 0; bottom: 0; right: 0; left: 0;display: flex;flex-direction: column;justify-content: center;align-items: center;}
#contentwrapper {height: 0;width: 100%;padding-bottom: 100%;outline: 3px dashed red;}
</style>
</head>

<body>
<div id="container">
    <div id="widthwrapper">
        <img id="imgwrapper" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Crect x='0' y='0' width='10' height='10' fill='none' stroke='black' stroke-opacity='0.3' /%3E%3C/svg%3E" />
        <div id="content">
            <div id="contentwrapper">
            </div>
        </div>
    </div>
</div>
</body>
</html>

    但是，如果一方面它适​​用于 Chrome/Safari，它与 Firefox 有问题。事实上，一旦调整大小，Firefox 似乎无法将图像包含在#widthwrapper 中。它调整图像的大小，但#widthwrapper 保持图像为 wxh = 0 x 0。更一般地说，Firefox 似乎不会向父 DIV 传播一个没有根据纵横比和高度调整大小的固有大小的 img 宽度......

    Firefox 包装没有固有大小的调整大小图像的问题

    欢迎任何与 Firefox 一起工作的想法......（我在 Bugzilla 上填写了一个错误......如果你支持它:-)...... https://bugzilla.mozilla.org/show_bug.cgi？ id=1491936 )

    4

    0 回答 0