Question

我试图制作一个Flexbox图片库，让悬停的图片扩展。

目前，柔性包装无法正常工作，某些图像位于包装盒外，而不是环绕。

如何制作图像以使图像环绕并填满白色空间，而不是溢出容器div？

codepen - https://codepen.io/anon/pen/XeyyPg

HTML

<div class="container">
  <img src="http://via.placeholder.com/274x295">
  <img src="http://via.placeholder.com/274x295">
  <img src="http://via.placeholder.com/274x295">
  <img src="http://via.placeholder.com/274x295">
  <img src="http://via.placeholder.com/274x295">
  <img src="http://via.placeholder.com/274x295">
  <img src="http://via.placeholder.com/274x295">
</div>

CSS

.container {
  border: solid 1px red;
  display: flex;
  max-width: 1370px;
  height: 590px;
  flex-wrap: wrap;
  flex-direction: column;
  align-content: flex-start;
  align-items: flex-start;
  justify-content: flex-start;
}

img {
  height: 295px;
  width: 274px;
  align-self: flex-start;
}

img:hover {
  width:548px;
  height: 590px;

}

此外，在当前没有图像悬停时忽略布局。这个想法是画廊总是会有一个放大的图像。

Answer 1

尝试将breaking changes更改为flex-direction：

row

Answer 2

在我看来，图像需要在悬停时进行重新排序，以避免将其他人推到外面。https://codepen.io/gc-nomade/pen/JreVjZ

img:nth-child(2n):hover {
  order: 2;/* here , image on the second row /last of each columns*/
}

.container {
  border: solid 1px red;
  display: flex;
  max-width: 1370px;
  height: 590px;
  flex-wrap: wrap;
  flex-direction: column;
  align-content: flex-start;
  align-items: flex-start;
  justify-content: flex-start;
}

img {
  height: 295px;
  width: 274px;
  align-self: flex-start;
}

img:hover {
  width: 548px;
  height: 590px;
}

<div class="container">
  <img src="http://via.placeholder.com/274x295">
  <img src="http://via.placeholder.com/274x295">
  <img src="http://via.placeholder.com/274x295">
  <img src="http://via.placeholder.com/274x295">
  <img src="http://via.placeholder.com/274x295">
  <img src="http://via.placeholder.com/274x295">
  <img src="http://via.placeholder.com/274x295">
</div>

Answer 3

您可以将图片放在容器DIV中，在悬停时使用不同的顶部/底部设置制作position: relative和图像position: absolute，具体取决于它们是在顶行还是在底行：

.container {
  border: solid 1px red;
  display: flex;
  max-width: 1370px;
  height: 590px;
  flex-wrap: wrap;
  flex-direction: column;
  align-content: flex-start;
  align-items: flex-start;
  justify-content: flex-start;
}

.imgcontainer {
  height: 295px;
  width: 274px;
  align-self: flex-start;
  position: relative;
}
img {
  width: 100%;
  height: auto;
}
img:hover {
  width:548px;
  height: 590px;
  position:absolute;
  z-index: 10;
}
.imgcontainer:nth-child(odd) > img:hover {
  left: 0;
  top: 0;
}
.imgcontainer:nth-child(even) > img:hover {
  left: 0;
  bottom: 0;
}

<div class="container">
  <div class="imgcontainer"><img src="http://via.placeholder.com/274x295?text=1"></div>
  <div class="imgcontainer"><img src="http://via.placeholder.com/274x295?text=2"></div>
  <div class="imgcontainer"><img src="http://via.placeholder.com/274x295?text=3"></div>
  <div class="imgcontainer"><img src="http://via.placeholder.com/274x295?text=4"></div>
  <div class="imgcontainer"><img src="http://via.placeholder.com/274x295?text=5"></div>
  <div class="imgcontainer"><img src="http://via.placeholder.com/274x295?text=6"></div>
  <div class="imgcontainer"><img src="http://via.placeholder.com/274x295?text=7"></div>
</div>

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

Flexbox - 图像溢出而不是包装

3 个答案: