css 按比例缩放其内容,直到它们适合,而不会溢出?

mfpqipee  于 2023-02-01  发布在  其他
关注(0)|答案(1)|浏览(150)

我正在尝试制作一个16:9的图片库,图片库的宽度和高度都受到容器的限制。它们应该自动 Package 成最适合缩放的行数或列数。我知道如何通过JS来实现这一点,但如果可能的话,我更愿意选择CSS解决方案。

/* vvv For demonstration purposes vvv */

body {
  background-color: grey;
}

body,
body * {
  padding: 0;
  margin: 0;
  overflow: hidden;
  text-align: center;
}

div.video img.test {
  /* So we can see the images. */
  background-color: #e6e6e6;
}

div.container {
  /* The actual size of this container will be responsive. */
  /* This basically simulates the aspect ratio for this fiddle, I guess. */
  width: 50vw;
  height: 90vh;
  background-color: white;
}

/* ^^^ For demonstration purposes ^^^ */

.container {
  display: flex;
  flex-direction: column;
  gap: 2vmin;
  padding: 10px;
  box-sizing: border-box;
}

.video-container {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 1vmin;
  align-content: flex-end;
  justify-content: center;
}

.video-container .video {
  flex: 1;
  /* flex-basis: 24%; */
}

.video-container .video>* {
  width: 100%;
  height: auto;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>help :c</title>
</head>

<body>
  <div class="container">
    <h1>
      Header
    </h1>
    <div>
      This is just some body text. The quick brown fox or whatever. Basically, the gallery should fit in the remaining space beneath this element.
    </div>
    <div class="video-container">
      <div class="video">
        <img width="1920" height="1080" class="test" />
      </div>
      <div class="video">
        <img width="1920" height="1080" class="test" />
      </div>
      <div class="video">
        <img width="1920" height="1080" class="test" />
      </div>
      <div class="video">
        <img width="1920" height="1080" class="test" />
      </div>
      <div class="video">
        <img width="1920" height="1080" class="test" />
      </div>
      <div class="video">
        <img width="1920" height="1080" class="test" />
      </div>
      <div class="video">
        <img width="1920" height="1080" class="test" />
      </div>
      <div class="video">
        <img width="1920" height="1080" class="test" />
      </div>
      <div class="video">
        <img width="1920" height="1080" class="test" />
      </div>
      <div class="video">
        <img width="1920" height="1080" class="test" />
      </div>
      <div class="video">
        <img width="1920" height="1080" class="test" />
      </div>
      <div class="video">
        <img width="1920" height="1080" class="test" />
      </div>
      <div class="video">
        <img width="1920" height="1080" class="test" />
      </div>
      <div class="video">
        <img width="1920" height="1080" class="test" />
      </div>
      <div class="video">
        <img width="1920" height="1080" class="test" />
      </div>
    </div>
  </div>
</body>

下面是相关的CSS。.video-container是图库。.video包含图像(视频缩略图)。

.video-container {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 1vmin;
    align-content: flex-end;
    justify-content: center;
}
.video-container .video {
    flex: 1;
    /* flex-basis: 24%; */
}
.video-container .video > * {
    width: 100%;
    height: auto;
}

基本上是this is what I want,我可以通过在flexbox里面的项目上设置flex-basis来实现,但是,这是没有响应的;例如,如果我将flex-basis设置为25%(实际上是24%),那么我将始终得到4列,如果图像不能被4完全除尽,那么last row grows;它们需要保持相同的大小!如果有,比如说,40张图片,那么将有10行,这将超出容器的边界!(This是该行为的外观)
我该怎么做?这是需要JS的东西吗?我应该使用网格而不是Flex吗?

eeq64g8w

eeq64g8w1#

最下面一行是因为.video-container .video上的flex: 1;而增长的,相反,只需使用计算出的width,该widthgap: 1vmin作为间距的因子。
例如,您可以将.video-container .video设置为width: calc(25% - 1vmin)

body {
  background-color: grey;
}

body,
body * {
  padding: 0;
  margin: 0;
  text-align: center;
}

div.video img.test {
  background-color: #e6e6e6;
}

div.container {
  width: 50vw;
  background-color: white;
}

.container {
  display: flex;
  flex-direction: column;
  gap: 2vmin;
  padding: 10px;
  box-sizing: border-box;
}

.video-container {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 1vmin;
  align-content: flex-end;
  justify-content: flex-start;
}

.video-container .video {
  width: calc(25% - 1vmin);
}

.video-container .video>* {
  width: 100%;
  height: auto;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>help :c</title>
</head>

<body>
  <div class="container">
    <h1>
      Header
    </h1>
    <div>
      This is just some body text. The quick brown fox or whatever. Basically, the gallery should fit in the remaining space beneath this element.
    </div>
    <div class="video-container">
      <div class="video">
        <img width="1920" height="1080" class="test" />
      </div>
      <div class="video">
        <img width="1920" height="1080" class="test" />
      </div>
      <div class="video">
        <img width="1920" height="1080" class="test" />
      </div>
      <div class="video">
        <img width="1920" height="1080" class="test" />
      </div>
      <div class="video">
        <img width="1920" height="1080" class="test" />
      </div>
      <div class="video">
        <img width="1920" height="1080" class="test" />
      </div>
      <div class="video">
        <img width="1920" height="1080" class="test" />
      </div>
      <div class="video">
        <img width="1920" height="1080" class="test" />
      </div>
      <div class="video">
        <img width="1920" height="1080" class="test" />
      </div>
      <div class="video">
        <img width="1920" height="1080" class="test" />
      </div>
      <div class="video">
        <img width="1920" height="1080" class="test" />
      </div>
      <div class="video">
        <img width="1920" height="1080" class="test" />
      </div>
      <div class="video">
        <img width="1920" height="1080" class="test" />
      </div>
      <div class="video">
        <img width="1920" height="1080" class="test" />
      </div>
      <div class="video">
        <img width="1920" height="1080" class="test" />
      </div>
    </div>
  </div>
</body>

相关问题