如何将不同方向的图像放入具有相等填充的同一容器中？

Question

我有一个水平滚动的图像容器，在一行中，它们之间的间距相等。大多数图像都在风景中，看起来很好，但也有一些肖像，它们之间有额外的间距。我一直在尝试让它们以相等的间距适配，并对不断变化的屏幕尺寸/移动视图做出反应，但在处理肖像图像方面遇到了麻烦。

​

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      margin-left: .3em;
    }

    h1 {
      margin-top: 1rem;
      margin-left: .5em;
      margin-bottom: -.3em;
      font-family: 'Ubuntu', sans-serif;
      font-size: 2.5em;
    }

    img {
      display: block;
      width: 100%; 

    }

    .gallery__thumb ~ .gallery__thumb {
      margin-left: 10px;
    }

    .sub-container {
      display: flex;
      overflow-x: auto;
      align-items: center;
      height: 100vh;
    }

    .gallery__thumb {
      min-width: 55%; 
      height: 85vh;
    }

    figure#test.gallery__thumb {
      max-width: 30%; 
      height: 85vh;
    }


    img.lazy {
      opacity: 0;
    }

    img:not(.initial) {
      transition: opacity 1s;
    }
    img.initial,
    img.loaded,
    img.error {
      opacity: 1;
    }

    img:not([src]) {
      visibility: hidden;
    }

        <main>
        <div class="flex-container">
            <div class="sub-container">
                <figure class="gallery__thumb">
                    <img
                        src= "https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg"
                        alt="">
                </figure>
                <figure class="gallery__thumb">
                    <img
                        src= "https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg"
                        alt="">
                </figure>
                <figure class="gallery__thumb">
                    <img
                        src= "https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg"
                        alt="">
                </figure>
                <figure class="gallery__thumb">
                    <img
                        src= "https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg"
                        alt="">
                </figure>   
                <figure class="gallery__thumb">
                    <img
                        src= "https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg"
                        alt="">
                </figure>
                <figure class="gallery__thumb">
                    <img
                        src= "https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg"
                        alt="">
                </figure>
                <figure class="gallery__thumb">
                    <img
                        src= "https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg"
                        alt="">
                </figure>
                
                <figure class="gallery__thumb"  id= "test">
                    <img
                         style = "max-height: 80vh;
                                  max-width: 60%;"
                        src= "http://images.unsplash.com/photo-1513655174826-a93ac99899d2?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max"
                        alt="">
                </figure>
                <figure class="gallery__thumb"  id= "test">
                    <img
                         style = "max-height: 80vh;
                                  max-width: 60%;"
                        src= "http://images.unsplash.com/photo-1513655174826-a93ac99899d2?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max"
                        alt="">
                </figure>
                <figure class="gallery__thumb">
                    <img
                        src= "https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg"
                        alt="">
                </figure>
                <figure class="gallery__thumb">
                    <img
                        src= "https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg"
                        alt="">
                </figure>       
                                                             
            </div>
        </div>

​

Answer 1

我建议稍微改变一下你的结构，这样你的容器就会有固定的高度，图像也会相应地调整，保持它们的比例，这样你就可以在容器中设置图像之间的gap。

​

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  margin-left: .3em;
}

h1 {
  margin-top: 1rem;
  margin-left: .5em;
  margin-bottom: -.3em;
  font-family: 'Ubuntu', sans-serif;
  font-size: 2.5em;
}

img {
  display: block;
  width: auto;
  height: 100%;
  
}

.sub-container {
  display: flex;
  overflow-x: auto;
  align-items: center;
  height: 100vh;
  /*Here's the space between them*/
  column-gap: 20px;
}

img.lazy {
  opacity: 0;
}

img:not(.initial) {
  transition: opacity 1s;
}

img.initial,
img.loaded,
img.error {
  opacity: 1;
}

img:not([src]) {
  visibility: hidden;
}

<div class="flex-container">
  <div class="sub-container">
    <img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" alt="">
    <img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" alt="">
    <img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" alt="">
    <img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" alt="">
    <img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" alt="">
    <img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" alt="">
    <img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" alt="">
    <img src="http://images.unsplash.com/photo-1513655174826-a93ac99899d2?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max" alt="">
    <img src="http://images.unsplash.com/photo-1513655174826-a93ac99899d2?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max" alt="">
    <img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" alt="">
    <img src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg" alt="">
  </div>
</div>

​