调整图像大小的最佳方法，％与最大宽度

如何解决调整图像大小的最佳方法，％与最大宽度

我正在尝试创建一个布局，在该布局中，图像可以根据视口宽度进行缩放。当视口中只能容纳2张图像时，我给它们分别设置了50％的宽度。当视口中只能容纳3张图像时，我给它们的宽度分别为33.33％。当视口中只能容纳4张图像时，我给它们的宽度均为25％。我基本上将图像数除以100。但是在某个时刻，例如，当我连续有6张图像时，它们各自将占16.66％，等等。

我当前正在使用flexBox并使用flex-wrap设置进行换行，因此如果视口变小，它们可以换行。我还使用媒体查询来根据视口大小更改图像的宽度。

但是我不太喜欢这种方法，因为如果所有图像的宽度都没有整数，宽度没有十进制数，那么会有一些额外的空间使布局看起来更漂亮不统一。

我可以使用最大宽度而不是百分比来实现相同的布局吗？

当屏幕上只能容纳2张图像时，我给它的最大宽度为300px。当屏幕上可以容纳3张图像时，例如，我给它的最大宽度为200px。这样，图像将按比例放大直到达到最大宽度，然后媒体查询将启动，最大宽度将发生变化。

这种布局的最佳方法是什么？

我想使图像具有响应性，但是意识到给它们一定的百分比只会使图像在增长时看起来像是像素化...

1-我是否在图像上使用百分比或最大宽度，以便它们可以根据视口更改大小。

2-我应该使用哪种响应图像技术？因此，当图像的宽度增大时，它们看起来就不会像素化...

解决方法

由于您要在不同的设备/视口宽度中提供相同的图像，因此按照本MDN guide中所述使用一组图像是一种很好的策略。

请确保您的移动版式不包含显示12张或以上（宽度约17％）的图像。但是相反，在台式机上为12张或更多图片，在平板电脑上为1张（手机）或4张。

我认为您不需要max-width，即width中的%，用于图像容器，并且：

img {
    width: 100%;
    height: auto;
}

就足够了。例如：

.container {
  width: 100%;
  display: flex;
  align-items: stretch;
  align-content: space-evenly;
  justify-content: space-evenly;
  flex-flow: row;
}

.container div {
  width: 50%;
}

.responsive img {
  width: 100%;
  object-fit: contain;
  height: auto;
}

<div class="container">
  <div>
    <picture class="responsive">
      <source media="(max-width:1024px)" srcset="https://picsum.photos/id/238/1024/600">
      <source media="(max-width:650px)" srcset="https://picsum.photos/seed/picsum/650/300">
      <source media="(max-width:465px)" srcset="https://picsum.photos/seed/picsum/465/300">
      <img src="https://picsum.photos/id/247/1200/800" alt="A good friend">
    </picture>
  </div>
  <div>
    <picture class="responsive">
      <source media="(max-width:1024px)" srcset="https://picsum.photos/id/239/1024/600">
      <source media="(max-width:650px)" srcset="https://picsum.photos/seed/picsum/650/300">
      <source media="(max-width:465px)" srcset="https://picsum.photos/seed/picsum/465/300">
      <img src="https://picsum.photos/id/237/1200/800" alt="A good friend">
    </picture>
  </div>
</div>

PS：：在查看代码段时尝试更改视口宽度。