如何使我的图像在可滚动行中响应对齐？

Question

我正在尝试将我的摄影作品集图像排列在一个可滚动的行中，并且还想让它们响应 window 调整大小和其他屏幕尺寸。本质上只是让它们随着屏幕的变化而收缩和增长。以前我把它们放在可滚动的行中，但现在我试图让它们响应，它们只是调整和缩小并显示整个图片库而不滚动，但它们真的很小，因为它们都试图适应 window.

这是我目前所拥有的

img {
    display: block;
    width: 100%;
    transition: .3s;

}

.flex-container {
    display: flex;
    padding: 5px;
    transition: .3s;
    overflow-x: scroll;
}

.sub-container {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  /*width: 50%;*/
}


.gallery__thumb {
  position: relative;
}

<div class="flex-container">
  <div class = "sub-container">
    <figure class="gallery__thumb">
       <img src="highq.jpg" alt="">
    </figure>
    <figure class="gallery__thumb">
       <img src="highq.jpg" alt="">
    </figure>
    <figure class="gallery__thumb">
       <img src="highq.jpg" alt="">
    </figure>   
    <figure class="gallery__thumb">
       <img src="highq.jpg" alt="">
    </figure>                   
    <figure class="gallery__thumb">
       <img src="highq.jpg" alt="">
    </figure>                                   
  </div>
</div>

Answer 1

您可能需要考虑以百分比测量单位[=]向图像添加最小宽度 51=]。这将允许图像增大和缩小，始终保持最小长度占父级总宽度的百分比。

在下面的示例中，我使用通用选择器将边距和填充重置为0 => *，这将删除任何 unseen/unwanted margin 或 padding 元素的默认浏览器设置。

然后我们使用 align-items: center; 垂直对齐 flex 子容器，每个 figure 元素 .gallery__thumb 将设置 min-width: 33%。 10px 边距 在每个剩余 .gallery__thumb 之间使用 general sibling combinator ~ => .gallery__thumb ~ .gallery__thumb { margin-left: 10px; }.

现在，当您调整浏览器大小时，无论浏览器大小如何，总会显示 3 张图片。如果要显示 4，则更改为 25%、5 到 20%，等等。在某些情况下，您可能需要使用 width: calc(33% - 20px) 添加计算测量值，其中 20 个像素可能代表 10 个像素的左右例如父容器的右边距。

See resizing browser GIF

* { margin: 0; padding: 0; box-sizing: border-box; } img { display: block; width: 100%; } .gallery__thumb ~ .gallery__thumb { margin-left: 10px; } .sub-container { display: flex; overflow-x: auto; align-items: center; } .gallery__thumb { min-width: 33%; }

<div class="flex-container"> <div class="sub-container"> <figure class="gallery__thumb"> <img src="https://placeimg.com/300/260/any" alt=""> </figure> <figure class="gallery__thumb"> <img src="https://placeimg.com/320/260/any" alt=""> </figure> <figure class="gallery__thumb"> <img src="https://placeimg.com/310/280/any" alt=""> </figure> <figure class="gallery__thumb"> <img src="https://placeimg.com/340/280/any" alt=""> </figure> <figure class="gallery__thumb"> <img src="https://placeimg.com/300/260/any" alt=""> </figure> </div> </div>

如何使我的图像在可滚动行中响应对齐？

How can I make my images responsive aligned in a scrollable row?

html

css

responsive-design