Question

晚上好

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

首先，假设所有图像都具有相同尺寸。

我考虑同时使用grid和flexbox，但是无法弄清楚从哪开始。我已经进行了一些搜索，但是找不到任何可作为基础的示例。

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

任何帮助将不胜感激。

Answer 1

最基本的说，您可以简单地隐藏所有未像这样显示的图像：

.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 2

更新：看过草图/样机后，我现在知道您要做什么了。

即使您希望避免使用媒体查询，它也是最佳解决方案。

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

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

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

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

或者，正如cjc指出的那样，如果空间不足以显示图像，则可以隐藏侧面的图像...但是除非使用flex-wrap，否则您仍然会有局部图像，然后如果发生这种情况，您将有空白空间...因此所有这些都使我们回到查询中：）

Answer 3

这可能是一个起点。

您还希望将图像行居中吗？

// 1. reserve texture name 
glGenTextures(1, &texture_M);

// 2. generate texture object
glBindTexture(GL_TEXTURE_2D, texture_M);

// set parameters
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_MIRRORED_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_MIRRORED_REPEAT);

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR_MIPMAP_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);

// generate texture image
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, image);
glGenerateMipmap(GL_TEXTURE_2D);

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;
}

图片可变宽度栏

3 个答案: