可变宽度的图像条

Question

晚上好，

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

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

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

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

如有任何帮助，我们将不胜感激。

Answer 1

更新：看到你的sketch/mockup，我现在明白你在追求什么了。

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

一般逻辑是确定图像的 'base' 大小，比方说，100 像素 x 100 像素。

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

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

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

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

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>

可变宽度的图像条

Variable width bar of images

css

flexbox

responsive-design

css-grid