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

Question

我有一个图像容器，在一行中水平滚动，图像之间的间距相等。大多数图像都是横向的，看起来不错，但有一些肖像，它们之间有额外的间距。我一直在努力使它们以相等的间距适合并响应不断变化的屏幕 sizes/mobile 视图，但一直在处理肖像图像时遇到问题。

    * {
      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>

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

How can I fit images of different orientations into the same container with equal padding?

html

css

responsive-design