个人中心
gpt4 book ai didi

How to maintain aspect ratio using aspect-ratio in a CSS grid on both landscape and portrait layouts(如何在横向和纵向布局上使用css网格中的纵横比来保持纵横比)

转载 作者：bug小助手 更新时间：2023-10-24 23:15:38 33 4
gpt4 key购买 nike



I have the following elements laid out using both Grid and Flexbox:

我使用网格和Flexbox布局了以下元素：


<div class="container">
  <div class="inner">
    <h2>Title</h2>
    <div class="square"></div>
  </div>
  <div class="inner">
    <h2>Title</h2>
    <div class="square"></div>
  </div>
  <div class="inner">
    <h2>Title</h2>
    <div class="square"></div>
  </div>
  <div class="inner">
    <h2>Title</h2>
    <div class="square"></div>
  </div>
</div>

I would like the .inner elements to be laid out in a 2-by-2 grid with the .square elements maintaining an aspect-ratio of 1.

我希望在2x2的网格中布局.int元素，而.square元素的纵横比保持为1。


So far I have the following CSS:

到目前为止，我有以下几个css：


.container {
  width: 100vw;
  height: 100vh;
  background: lightblue;
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
}
.inner {
  background: lightpink;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.square {
  background: lightgreen;
  aspect-ratio: 1;
  flex-grow: 1;
}

This works fine when the width of the viewport is greater than the height (e.g. landscape):

如果视区的宽度大于高度(例如，横向)，则可以很好地执行此操作：


Working fine in landscape


But when the height is greater than the width (e.g. portrait), the squares overlap:

但当高度大于宽度时(例如纵向)，正方形会重叠：


not working in portrait


I can fix the issue for portrait by changing align-items: center; in .inner to align-items: self but this then breaks the layout for landscape.

我可以通过将Align-Items：Center；in.int更改为Align-Items：self来修复纵向的问题，但这会破坏横向的布局。


Is there any way I can get it to work on both?

有没有办法让它在两种情况下都起作用？


CodePen here: https://codepen.io/danielgibbsnz/pen/KKbWoWL (just resize the window to portrait to see the problem).

CodePen这里：https://codepen.io/danielgibbsnz/pen/KKbWoWL(只需将窗口大小调整为纵向即可看到问题)。



Note: I would ideally like to accomplish this using aspect-ratio and not resorting to the padding hack (if at all possible).

注：理想情况下，我希望使用纵横比来实现这一点，而不是求助于填充黑客(如果可能的话)。


更多回答
优秀答案推荐

Looks like you'll need a wrapper for .square with the same aspect-ratio: 1;:

看起来您需要一个具有相同长宽比的.square包装器：1；：




body {
  margin: 0;
}

.container {
  width: 100vw;
  height: 100vh;
  background: blue;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.inner {
  background: yellow;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.square-wrapp {
  aspect-ratio: 1;
  flex: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 100%;
}

.square{
  background: lightgreen;
  aspect-ratio: 1;
}

<div class="container">
  <div class="inner">
    <h2>Title</h2>
    <div class="square-wrapp">
      <div class="square"></div>
    </div>
  </div>
  <div class="inner">
    <h2>Title</h2>
    <div class="square-wrapp">
      <div class="square"></div>
    </div>
  </div>
  <div class="inner">
    <h2>Title</h2>
    <div class="square-wrapp">
      <div class="square"></div>
    </div>
  </div>
  <div class="inner">
    <h2>Title</h2>
    <div class="square-wrapp">
      <div class="square"></div>
    </div>
  </div>
</div>





Would something like this work better? (Note: it involves a random width on the square, so may not be what you want.)

像这样的东西会工作得更好吗？(注意：它涉及到正方形上的随机宽度，因此可能不是您想要的。)




body {
  margin: 0;
}

.container {
  width: 100vw;
  min-height: 100vh;
  background: lightblue;
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.inner {
  background: lightpink;
  display: grid;
  place-items: center;
}
.square {
  background: lightgreen;
  aspect-ratio: 1;
  width: 70%;
}

<div class="container">
  <div class="inner">
    <h2>Title</h2>
    <div class="square"></div>
  </div>
  <div class="inner">
    <h2>Title</h2>
    <div class="square"></div>
  </div>
  <div class="inner">
    <h2>Title</h2>
    <div class="square"></div>
  </div>
  <div class="inner">
    <h2>Title</h2>
    <div class="square"></div>
  </div>
</div>




更多回答

Excellent, thanks. I don't suppose you're able to explain why this is the case? There's enough nested containers here that I don't fully understand what's going on.

太好了，谢谢。我想你不能解释为什么会这样吧？这里有足够多的嵌套容器，我不能完全理解发生了什么。

One quick tweak: how would I prevent the title from moving further away from the square in a portrait viewport?

一个快速调整：如何防止标题在肖像视口中远离正方形？

.square-wrapp { justify-content: flex-start; }

.square-wrapp{JUSTIFY-Content：Flex-Start；}

Hmm, that keeps the square and the title together but they're not centred vertically any more. I've played around a bit but haven't succeeded yet...

嗯，这让正方形和标题保持在一起，但它们不再垂直居中。我已经尝试了一些，但还没有成功。

This kind of works, but with a viewport wide enough the content overflows the container vertically, which is something I'm trying to avoid.

这种方法很有效，但是如果有足够宽的视区，内容会垂直溢出容器，这是我试图避免的。

33 4 0
文章推荐： How does Expo Go run user JavaScript?(Expo Go如何运行用户JavaScript？)
文章推荐： Angular form Validators.pattern does not work for matching 2 variants(角度形式验证器。模式不适用于匹配2个变体)
文章推荐： async import() function from CommonJS to load ESM asynchronously:(来自CommonJS的异步导入()函数，用于异步加载ESM：)
文章推荐： WooCommerce API only returns 5 orders(WooCommerce API仅退回5个订单)
bug小助手
个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章
滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com