Question

我已经确定了如何根据宽度设置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应该与矩形宽一样宽，并且矩形宽。< / p>

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

Answer 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>

Answer 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)会这样做。

Answer 3

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

＆＃13;

$(".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);
    }
});

＆＃13;

.screen{
    background: gray;
    width: 100px;
    height: 100px;
}

.rectangle{
    background: blue;
    width: 90%;
    height: 90%;
}

.square{
    background: red;
    width: 30px;
    height: 30px;
}

＆＃13;

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

＆＃13;

它仅包含JQueryUI以模拟＆＃34;屏幕＆＃34;的大小调整。

Answer 4

如果您可以使用min并且父母是您的rect，则可以执行以下操作：

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

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

仅限CSS的方形div拟合矩形div

4 个答案: