html - 使用 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 拉伸(stretch)为正方形以避免占用整个空间。

  • 可以是父级

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

如果可以使用垂直填充或边距来拉伸(stretch)使用父级宽度的 div，您还必须注意该方法使用的空间。