仅适用于矩形 div 的 CSS 方形 div答案

【问题标题】：CSS-only square div fitting inside rectangle div仅适用于矩形 div 的 CSS 方形 div
【发布时间】：2020-11-24 06:13:43
【问题描述】：

我已经确定了如何根据宽度设置 div 高度（使用百分比宽度和 padding-bottom）。但我还需要能够根据其高度设置 div 宽度。我试过使用 vw/vm/vh 单位，但这些单位是相对于视口而不是容器的。

所以，在下面的例子中

<body>
    <div class="rectangle">
        <div class="square">
        </div>
    </div>
</body>

以下是一些仅在纵向中有效的无效 CSS：

.rectangle {
  background-color:red;
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
}

.square {
  background-color:blue;
  width:100%;
  padding-bottom:100%;
}

我希望 .rectangle 填充其容器，这意味着随着窗口大小的变化，.rectangle 可能会从横向布局变为纵向布局。发生这种情况时，我希望 .square div 尽可能地填充而不会丢失其方形。

因此，如果浏览器窗口的宽度大于高度（横向），则 .rectangle 应该填满窗口，并且 .square 应该与矩形的高度一样高，并且与矩形的高度一样宽。

如果浏览器窗口的高度大于宽度（纵向），.rectangle 应该填满窗口，.square 应该与矩形宽度一样宽，并且与矩形宽度一样高。

所以，我可以使用媒体查询在横向和纵向之间交换样式，并且我有纵向案例的解决方案，但我还没有找到横向案例的解决方案。如何让正方形填充其父级的高度，并限制其宽度以保持正方形的纵横比？

【问题讨论】：

一个css相关问题的css代码怎么样？
有不同的方法不能一起工作。由于我还没有找到解决方案，因此我的 CSS 与解决方案不会特别相关。以下是肖像案例的一些可能性：stackoverflow.com/questions/1495407/…

标签： css

【解决方案1】：

你可以：

在正方形内放置一个比例为 1:1 的替换元素。

例如，它可以是 1px × 1px 的正方形图像，也可以是画布。

样式替换为height: 100%，使其垂直跨越整个正方形。

让它有默认的width: auto，这样它的宽度就遵循1:1的纵横比。

使用display: block 对其进行样式设置以避免extra space below image 问题。
使正方形使用shrink-to-fit width算法计算其宽度，使其也具有1:1的比例。

您可以通过浮动它或使用display: inline-block 来实现此目的。
如果您希望正方形有内容，请将它们放在绝对定位的包装器中，以防止它们改变正方形的大小。

使用top:0; right:0; bottom:0; left:0 使该包装器与正方形一样大，并将正方形作为其相对容器。

这应该可行。但是，由于某些原因，当窗口调整大小时，浏览器似乎不会更新宽度，所以它只在最初工作。用 JS 强制重新渲染解决了这个问题。

var s = document.getElementById('square'),
    p = s.parentNode,
    n = s.nextSibling;
window.addEventListener('resize', function() {
  // Force a rerender
  p.removeChild(s);
  p.insertBefore(s, n);
});

html, body, #square, canvas {
  height: 100%;
  margin: 0;
  display: block;
}
#square {
  float: left;
  position: relative;
  background: red;
}
#contents {
  overflow: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

<div id="square">
  <canvas height="1" width="1"></canvas>
  <div id="contents">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</div>
</div>

【讨论】：

我没有任何运气强制重新渲染。 stackoverflow.com/questions/8840580/…
@richremer 嗯，不过，使用 devtools 取消设置和重置一些更改样式的样式似乎可行。我会尝试找到一个JS的方式。
哦，我想我明白问题所在了。画布是方形的，但没有背景颜色。调整大小后容器不是方形的，红色把我扔了。
好的，我已经包含了这个重新渲染部分。很丑，此时我可以用JS来计算1:1比例对应的宽度，但不管怎样。

【解决方案2】：

当.rectangle 真正占据整个窗口时，这是最容易做到的——换句话说，它的宽度和高度分别为100vw 和100vh。

如果是这样，那么你的正方形就是：

.square {
    width: 100vh;
    height: 100vh;
    margin: 0 auto;
}
@media all and (orientation: portrait) {
    .square {
        width: 100vw;
        height: 100vw;
    }
}

在纵向视图中将正方形垂直居中可能会有点棘手，但肯定不是不可能的。例如，margin-top: calc(50vh - 50vw) 会这样做。

【讨论】：

"我尝试过使用 vw/vm/vh 单位，但这些单位是相对于视口而不是容器"

【解决方案3】：

您可以尝试使用 jquery 来监听 resize 事件。看看这个JSFiddle。

$(".screen").resizable({});

$(".screen").on("load resize",function(e){
    var rectangle = $(".rectangle");
    var square = $(".square");
    
    var rectWidth = rectangle.width();
    var rectHeight = rectangle.height();
    if(rectWidth < rectHeight){
    	square.width(rectWidth);
        square.height(rectWidth);
    }
    else{
    	square.width(rectHeight);
        square.height(rectHeight);
    }
});

.screen{
    background: gray;
    width: 100px;
    height: 100px;
}

.rectangle{
    background: blue;
    width: 90%;
    height: 90%;
}

.square{
    background: red;
    width: 30px;
    height: 30px;
}

<div class="screen">
    <div class="rectangle">
        <div class="square">
        </div>
    </div>
</div>

它包含的 JQueryUI 仅用于模拟“屏幕”的大小调整。

【讨论】：

【解决方案4】：

如果你可以使用 min 并且 parent 是你的 rect 那么你可以这样做：

.rectangle {
  width: 100vw;
  height: 100vh;
}

.square {
  width: min(80vw, 80vh);
  height: min(80vw, 80vh);
}

【讨论】：