html - 当视口变得太小时时，Flexbox 居中 2 个图像并缩放图像

Question

我现在正在摆弄这个简单的布局一段时间。

目标是利用 flexbox 将 2 个图像居中，当屏幕变小时，这些图像会调整大小，因为图像本身相当大。

桌面：

移动的：

正文本身也位于页脚元素上方，但正文中的内容与页脚重叠，有人知道如何解决这个问题吗？

HTML 如下所示：

<div class="row">
  <div class="imagecontainer">
    <img class="prijsimage" src="../../assets/images/example1.png">
    <img class="prijsimage" src="../../assets/images/example2.png">
  </div>
</div>

CSS 看起来像这样：

.imagecontainer{
 display: flex;
 justify-content: center;
 flex-wrap: wrap;
}

我也试过这段代码：

<div class="row">
  <div class="imagecontainer">
    <img class="prijsimage" src="../../assets/images/prijslijst_noback.png">
  </div>
  <div class="imagecontainer">
    <img class="prijsimage" src="../../assets/images/pijslijst_noback_wax.png">
  </div>
</div>

.imagecontainer{
    flex: 50%;
    display: flex;
    flex-direction: row;
   align-items: center;
   justify-content: center;
   margin-top: 5%;
}

.prijsimage{
    max-height: 100%;
    vertical-align: bottom;
}
.row{
   display: flex;
   flex-direction: row;
}


@media (max-width: 480px) {
    .row {
      flex-direction: row;
    }
  
    .imagecontainer {
      height: auto;
      width: 100%;
      
    }
  
    .prijsimage {
      width: 100%;
      max-height: 75vh;
      min-width: 0;
    }
  }

我真的希望这能澄清我的问题。有人可以帮我解决这个问题吗？

标签： htmlcssangularflexbox

Answer 1

您需要flex-direction: column;在媒体查询中将 设置为容器。我清理了您的代码并使其尽可能简单，以便您可以复制并粘贴到您的项目中。

.block {
  width: 100%
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.container>div {
    padding: 1em;
    flex: 0 50%;
    box-sizing: border-box;
    border: red solid;
}

/* Changed the max-width for testing purposes */
@media (max-width: 600px) {
    .container {
        flex-direction: column;
    }
}

<div class="container">
  <div class="block">content 1</div>
  <div class="block">content 2</div>
  <div class="block">content 3</div>
  <div class="block">content 4</div>
</div>