使用 width % 和 padding-bottom % 时正方形 div 的固定大小

Question

我想创建一个具有固定大小的正方形的 Flexbox。用 width % 和 padding-bottom % 解决。

但是如果我把图片放在那里，它会改变尺寸。

我该如何解决这个问题？

我尝试了 max-width、max-padding-bottom（哈哈，我知道）、padding-bottom: max(x%)，...

我现在不知道。

.flex-container {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   width: 100%;
 }

 .flex-container > div {
    width: 32%;
    padding-bottom: 32%;
    position: relative;
    background-color: #000;
    margin: 0.5%;
 }

img.flex {
  height: 100%;
  width: 100%;
 }

<div class="flex-container">
    <div>
      <img class="flex"     src="https://upload.wikimedia.org/wikipedia/commons/5/54/KDE_4.png">
      
    </div>
   <div></div>
   <div></div>  
</div>

<p> some text <p>
<p> some text <p>
  
  <div class="flex-container">
    <div></div>
   <div></div>
   <div></div>  
</div>

Answer 1

根据您的代码，填充也是您希望显示图像的空间。

可以设置图片的绝对位置。

.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}

.flex-container>div {
  width: 32%;
  padding-bottom: 32%;
  position: relative;
  background-color: #000;
  margin: 0.5%;
}

img.flex {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

<div class="flex-container">
  <div>
    <img class="flex" src="https://upload.wikimedia.org/wikipedia/commons/5/54/KDE_4.png">

  </div>
  <div></div>
  <div></div>
</div>

<p> some text
  <p>
    <p> some text
      <p>

        <div class="flex-container">
          <div></div>
          <div></div>
          <div></div>
        </div>

您还可以使用伪元素将 div 拉伸为正方形，以避免使其使用整个 space。
- 可以是parent

.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}

.flex-container::before {
  content: "";
  padding-bottom: 33.33%;
  with: 0;
}

.flex-container>div {
  width: 32%;
  position: relative;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.1)50%, transparent 50%) #000;
  margin: 0.5%;
}

img.flex {
  width: 100%;
  max-height: 100%;/*might be better ? */
}

<div class="flex-container">
  <div>
    <img class="flex" src="https://upload.wikimedia.org/wikipedia/commons/5/54/KDE_4.png">
  </div>

  <div></div>
  <div></div>
</div>
<p> some text
  <p>
    <p> some text
      <p>
        <div class="flex-container">
          <div></div>
          <div>d</div>
          <div>d</div>
        </div>

或 child

.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}

.flex-container>div {
  width: 32%;
  position: relative;
  background-color: #000;
  margin: 0.5%;
}

.flex-container>div::before {
  content: '';
  float: left;
  width: 0;
  padding: 50% 0;
}

img.flex {
  height: 100%;
  width: 100%;
}

<div class="flex-container">
  <div>
    <img class="flex" src="https://upload.wikimedia.org/wikipedia/commons/5/54/KDE_4.png">

  </div>
  <div></div>
  <div></div>
</div>

<p> some text
  <p>
    <p> some text
      <p>

        <div class="flex-container">
          <div></div>
          <div></div>
          <div></div>
        </div>

如果垂直填充或边距可用于使用 parent 的宽度拉伸 div，您还必须注意该方法使用的空间。

使用 width % 和 padding-bottom % 时正方形 div 的固定大小

Fixed size for square div when using width % and padding-bottom %

html

css

square