Question

我正在尝试创建两个部分，一个部分为左，另一部分为右，其中一个是图像。它们应始终保持相同的宽度和高度，并始终保持正方形。我在Wordpress上使用Avada主题，并尝试使用其Element Builder和自定义CSS修复此问题。没有运气。

这是一个页面，其中抢救不是正方形而是响应的： https://sundlof.se/devskargard/

我发现有些代码确实将div强制为平方，但它们并未将另一个平方计入公式。如果这需要jQuery，请告诉我，我还没有尝试过，如果可能的话，我真的要如何使用CSS完成这项工作。

任何想法将不胜感激！

关于，弗雷德里克

Answer 1

您可以在方形包装纸上使用 display：flex 并为其设置高度。这将始终导致 flex-child 占据其直接 flex父级的高度。然后，您可以使用 flex-wrap 属性

插入一些媒体查询，以使此flex网格响应

body {
  padding: 20px;
  box-sizing: border-box;
}

.flex {
  display: flex;
  justify-content: center;
  border: 1px solid black;
  height: 250px;
}

.section {
  align-items: center;
  width: 50%;
  border: 1px solid black;
  margin: 5px;
}

<div class="flex">
  <div class="section">Section 1</div>
  <div class="section">Section 2</div>
</div>

Answer 2

只要浏览以下链接，您就会对纵横比和响应块有所了解。

Learn how to maintain the aspect ratio of an element with CSS.

Aspect Ratio Boxes Advanced

<div class="container"> 
 <div class="text">1:1 Aspect ratio</div> 
</div>

.container {
   background-color: red;
   position: relative;
   width: 100%;
   padding-top: 100%; /* 1:1 Aspect Ratio */
}

.text {
   position:  absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   text-align: center;
   font-size: 20px;
   color: white;
}

Example

Answer 3

感谢您的帮助！我最终通过每200 och 300px的媒体查询来证明该正方形是合理的，以使其接近正方形。不是一个漂亮的解决方案，而是一个简单的解决方案。

力方广场

3 个答案: