Question

我一直在尝试使用flexbox实现类似此画廊风格的布局：Example of desired outcome

我希望图像（无论大小）以两列布局彼此相邻，直到移动布局，每行只有1张图像。当两个图像彼此相邻时，我希望它们缩放到两个图像中最大的一个的大小，而不会拉伸或扭曲任何一个图像。

我目前的尝试可以在这里找到：Codepen

你可以看到我尝试了两种方法，每种方法都会产生不同的问题。

我会坚持拉伸的图像问题，因为它目前最接近我想要的结果。

    <div class="wrapper">
  <header>
    MY HEADER
  </header>
  <section>
    <a href="" class= "unitie">
      <img src="http://www.landscapes.org/london/wp-content/uploads/sites/8/2015/09/roadmap-to-landscapes-finance.jpg" />
    </a>
    <a href="" class= "meow">
      <img src="https://s-media-cache-ak0.pinimg.com/originals/bd/99/3e/bd993e9921e1131fef606fcd99a03494.png" />
    </a>
</section>
  <footer>
    2016
  </footer>
</div>

CSS：

.wrapper {
  display: flex;
  flex-direction: column;
}

header {
  display: flex;
}

section {
  display: flex;
  flex-flow: row wrap;
}

a {
  width: 48%;
  margin-left: 10px;
}

img {
  max-width: 100%;
  height: 100%;
}

我在网上发现了这个想法：Using aspect ratio for flex property 但我不知道如何找到任何图像的宽高比并将其转换为flex成长属性值，就像他一样。

非常感谢任何帮助。

Answer 1

很多人在这里。

首先，确保所有html标签正确关闭。其次，class="name“不是class "name"

最后，制作适合容器的html内嵌图像的唯一方法是将其从页面流中移除，然后将其绝对定位，使其比基于图像属性的容器更高或更宽。

最简单的方法是将其移动到css背景图像中。 <a href="" class="unitie grid--image" style="background-image:url('image.jpg')> </a>

.grid--image { background-size: cover; }

Flexbox图库布局，不会拉伸不同大小的图像

1 个答案: