溢出导致移动下一个块

Question

小屏幕上的

下一个块向下移动，因为图片太大而且溢出会阻止在没有空间的情况下显示块。我可以用任何方式模拟碰撞吗？

<div class="image">
    <img src="img/1.jpg" />
</div>
<div class="image">
    <img src="img/2.jpg" />
</div>

.image{
    width:100%;
    height:560px;
    overflow:hidden;
    display:flex;
    align-items:center;
    margin:0 auto 0;
    & > img{
        width:100%;
        height:auto;
    }
}

Answer 1

您可以使用媒体查询对此问题进行排序，您可以在此处为图像定义移动视图属性

@media (min-width: 601px and max-width: (how ever many pixels you want)) {
  .image{
//Add properties here
}
}

了解更多Here

Answer 2

考虑到您手动指定图像的高度，他们将尝试占据该高度。但是，考虑到它们大致为方形，并且width属性为100%，它们只会在高度上扩展，直到达到最大宽度。因此，您最终会在图像之间出现间隙。

我不确定你是通过指定这个固定高度来完成的，但你不能指定图像的高度，同时限制宽度，没有间隙。只需移除.image上的固定高度即可解决问题：

body {
  max-width: 500px; /* Showcasing the problem */
}

.image {
  width: 100%;
  /*height: 560px;*/
  overflow: hidden;
  display: flex;
  align-items: center;
  margin: 0 auto 0;
  border: 1px solid blue; /* Added to show the divide */
}

.image>img {
  width: 100%;
  height: auto;
}

<div class="image">
  <img src="http://placehold.it/100" />
</div>
<div class="image">
  <img src="http://placehold.it/100" />
</div>

希望这有帮助！ ：）

Answer 3

您可以将图像高度设置为100％，但不会保持纵横比。

.image{
width:100%;
height:560px;
overflow:hidden;
display:flex;
align-items:center;
margin:0 auto 0;
& > img{
    width:100%;
    height:100%;
}
}

或者您可以将.image的高度更改为自动以降低屏幕尺寸

@media (max-width: 980px) {
 .image{
   width:100%;
   height:auto;
   overflow:hidden;
   display:flex;
   align-items:center;
   margin:0 auto 0;
     & > img{
       width:100%;
       height:auto;
     }
   }
  }