可变宽度的图像条

Question

晚上好，

我正在尝试在我的网站上创建一个具有可变宽度（最大 1024 像素）的图像“栏”。我不想拉伸图像，而是希望保持恒定的高度，并根据网站宽度向栏添加或删除图像。

作为起点，假设所有图像的尺寸相同。

我考虑过同时使用网格和弹性框，但不知道从哪里开始。我进行了一些搜索，但找不到任何可用作基础的示例。

如果可以的话，我宁愿避免使用@media 查询。

任何帮助将不胜感激。

Answer 1

更新：看过你的草图/模型后，我现在明白你在追求什么。

即使您想避免使用媒体查询，这也是最好的解决方案。

一般逻辑是确定图像的“基本”尺寸，比如 100 像素 x 100 像素。

然后，根据视口宽度并使用媒体查询，您可以确定在任何给定时刻要显示多少张图片。

您必须考虑到，视口宽度变化很大，并且总空间/图像大小总是会有部分划分。然后，您必须决定在这种情况下要做什么，通常情况下，您为每行定义固定数量的图像并隐藏其余图像。

这或多或少是你所追求的吗？

或者，正如 cjc 所指出的那样，如果空间不足以显示它们，您会这样做，以便侧面的图像会隐藏......但除非您使用 flex-wrap，否则您仍然会有部分图像，然后如果发生这种情况，你就会有空的空间......所以这一切都让我们回到了查询:)

Answer 2

在最基本的情况下，您可以简单地隐藏所有未显示的图像：

.photo-bar {
  width: 100%;
  height: 100px; /* I deliberately set the size smaller than the image height to show that it works with different image sizes. If all of the images are actually the same height then you probably want it to match the image height */
  overflow: hidden;
}

.photo-bar img {
  height: 100%;
  
  /* This is to make sure you don't introduce spaces between the pictures */
  display: block;
  float: left;
}

<div class='photo-bar'>
  <img src='http://via.placeholder.com/160x120' />
  <img src='http://via.placeholder.com/160x120' />
  <img src='http://via.placeholder.com/160x120' />
  <img src='http://via.placeholder.com/160x120' />
  <img src='http://via.placeholder.com/160x120' />
  <img src='http://via.placeholder.com/160x120' />
  <img src='http://via.placeholder.com/160x120' />
  <img src='http://via.placeholder.com/160x120' />
  <img src='http://via.placeholder.com/160x120' />
</div>

您当然可以使用flex-direction: row 变得更漂亮，尽管这样获得所描述的行为会更加复杂（仅显示适合的图像）。如果您想要一个有水平滚动条的画廊，这是一个更好的选择。

.photo-bar {
  display: flex;
  flex-direction: row;
  height: 100px;
  overflow: scroll;
  position: relative;
}

.photo-bar img {
  height: 100%;
}

<div class='photo-bar'>
  <img src='http://via.placeholder.com/160x120' />
  <img src='http://via.placeholder.com/160x120' />
  <img src='http://via.placeholder.com/160x120' />
  <img src='http://via.placeholder.com/160x120' />
  <img src='http://via.placeholder.com/160x120' />
  <img src='http://via.placeholder.com/160x120' />
  <img src='http://via.placeholder.com/160x120' />
  <img src='http://via.placeholder.com/160x120' />
  <img src='http://via.placeholder.com/160x120' />
</div>

Answer 3

这可能是一个起点。

您是否还希望图像行居中？

---

body {
    margin: 0;
    padding: 0;
}

.image-bar {
    display: flex;
    
    /* no-wrap prevents the images from soft wrapping. */
    wrap: no-wrap;
    
    /* This will hide any images that are off the page. 
       I guess it wouldn't matter too much since you can't see
       the images anyways. */
    overflow: hidden;
}

<div class="image-bar">
    <img src="https://unsplash.it/150">
    <img src="https://unsplash.it/150">
    <img src="https://unsplash.it/150">
    <img src="https://unsplash.it/150">
    <img src="https://unsplash.it/150">
    <img src="https://unsplash.it/150">
    <img src="https://unsplash.it/150">
</div>