Question

希望您可以帮助我。通常，这是一个普遍的问题，但是我从Google找到的解决方案在我的特定情况下不适用于我，因为它们会导致意外的副作用或不允许我使用所有想要的功能。看一下这段代码：

<div class="libraryThumbnail">
  <img src="https://bulma.io/images/placeholders/480x640.png"> Image One
</div>
<div class="libraryThumbnail">
  <img src="https://bulma.io/images/placeholders/480x640.png"> Image Two
</div>
<div class="libraryThumbnail">
  <img src="https://bulma.io/images/placeholders/480x640.png"> Image Three
</div>
<div class="libraryThumbnail">
  <img src="https://bulma.io/images/placeholders/480x640.png"> Image Four
</div>
<div class="libraryThumbnail">
  <img src="https://bulma.io/images/placeholders/480x640.png"> Image Five
</div>
<div class="libraryThumbnail">
  <img src="https://bulma.io/images/placeholders/480x640.png"> Image Six
</div>
<div class="libraryThumbnail">
  <img src="https://bulma.io/images/placeholders/480x640.png"> Image Seven
</div>
<div class="libraryThumbnail">
  <img src="https://bulma.io/images/placeholders/480x640.png"> Image Eight
</div>
<div class="libraryThumbnail">
  <img src="https://bulma.io/images/placeholders/480x640.png"> Image Nine
</div>
<div class="libraryThumbnail">
  <img src="https://bulma.io/images/placeholders/480x640.png"> Image Ten
</div>

html,
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

* {
  box-sizing: inherit;
}

.libraryThumbnail img {
  height: auto;
  max-width: 100%;
}

.libraryThumbnail {
  text-align: center;
  padding: 0 3px;
  float: left;
  margin: 6px 0;
  width: 10%;
}

@media only screen and (max-width: 1100px) {
  .libraryThumbnail {
    width: 11.11%;
  }
}

@media only screen and (max-width: 1000px) {
  .libraryThumbnail {
    width: 12.5%;
  }
}

@media only screen and (max-width: 900px) {
  .libraryThumbnail {
    width: 14.28%;
  }
}
@media only screen and (max-width: 800px) {
  .libraryThumbnail {
    width: 16.66%;
  }
}

@media only screen and (max-width: 700px) {
  .libraryThumbnail {
    width: 20%;
  }
}
@media only screen and (max-width: 600px) {
  .libraryThumbnail {
    width: 25%;
  }
}
@media only screen and (max-width: 500px) {
  .libraryThumbnail {
    width: 33%;
  }
}
@media only screen and (max-width: 400px) {
  .libraryThumbnail {
    width: 50%;
  }
}
@media only screen and (max-width: 300px) {
  .libraryThumbnail {
    width: 100%;
  }
}

https://codepen.io/anon/pen/wRdyKw

这是我想要的行为。请注意，图像在断点之间如何缩放，并且一行始终占据浏览器的整个宽度。当然，一切都很好而整洁。

现在让我们用尺寸和纵横比略有不同的图像替换图像。 https://codepen.io/anon/pen/MZmQWj事情开始破裂。我将如何处理这些图像的第一个行为？拉伸效果不理想，但老实说我可以接受，因为我事先知道所有图像都将足够接近相同的尺寸，不会太明显。但理想情况下，每个图像都应以其div为中心，而空白将填补空白。再次，我发现了许多通过谷歌搜索相关短语来实现此目的的方法，但是它们都不适合我，而且我对CSS的了解还不足以了解确切的原因。

Answer 1

快速解答：

将float: right替换为display: inline-block。

说明：

由于您的图像位于不同的height中。这就是float: left可能工作异常的原因。

display: inline-block可以胜任，因为inline-block会自动包裹并对齐左侧。

替代

您可以尝试display: flex和flex-wrap: wrap来达到相同的目标。

Answer 2

可以尝试以下方法：https://codepen.io/anon/pen/ZVKxam

html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

* {
  box-sizing: inherit;
}

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}

.libraryThumbnail img {
  height: 97%;
  width: 100%;
  max-width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.libraryThumbnail {
  position: relative;
  text-align: center;
  height: 0;
  padding: 15% 3px 0;
  margin: 6px 0;
  flex-basis: 9.9%;
}

@media only screen and (max-width: 1100px) {
  .libraryThumbnail {
    flex-basis: 11.11%;
  }
}

@media only screen and (max-width: 1000px) {
  .libraryThumbnail {
    flex-basis: 12.5%;
  }
}

@media only screen and (max-width: 900px) {
  .libraryThumbnail {
    flex-basis: 14.28%;
  }
}
@media only screen and (max-width: 800px) {
  .libraryThumbnail {
    flex-basis: 16.66%;
  }
}

@media only screen and (max-width: 700px) {
  .libraryThumbnail {
    flex-basis: 20%;
  }
}
@media only screen and (max-width: 600px) {
  .libraryThumbnail {
    flex-basis: 25%;
  }
}
@media only screen and (max-width: 500px) {
  .libraryThumbnail {
    flex-basis: 33%;
  }
}
@media only screen and (max-width: 400px) {
  .libraryThumbnail {
    flex-basis: 50%;
  }
}
@media only screen and (max-width: 300px) {
  .libraryThumbnail {
    flex-basis: 100%;
  }
}

Answer 3

其他答案对我不起作用，但最终我使用了一个CSS网格，其中将flexboxes作为图像容器：

.libraryGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10em, 0fr));
  grid-gap: 1em;

  justify-content: center;
  align-items: center;
}

.libraryThumbnail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.libraryThumbnail img {
  width: 100%;
}

https://codepen.io/anon/pen/LMjXjM

基于css-tricks https://css-tricks.com/snippets/css/css-grid-starter-layouts/#grid-fit-as-needed

当图像的尺寸/比例不同时，如何使图像画廊反应灵敏且整齐？

3 个答案: