时间戳

首页 > 解决方案 > 调整图像大小的最佳方法，% 与最大宽度

html - 调整图像大小的最佳方法，% 与最大宽度

问题描述

我正在尝试创建一个布局，其中图像可以根据视口宽度增长和缩小。当视口中只能容纳 2 张图像时，我将它们的宽度分别设置为 50%。当视口中只能容纳 3 张图像时，我给它们每张的宽度为 33.33%。当视口中只能容纳 4 张图像时，我给它们每张的宽度为 25%。我基本上将图像数量除以 100。但是在某些时候，例如，当我连续拍摄 6 张图像时，它们每张将占 16.66%，等等。

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

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

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

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

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

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

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

2- 我使用哪种响应式图像技术？所以当它们的宽度增加时，图像看起来不会像素化......

具有百分比宽度的图像

标签： htmlcssimageflexboxresponsive-images

解决方案

由于您想在不同的设备/视口宽度中提供相同的图像，因此使用本MDN 指南中描述的一组图像是一个很好的策略。

确保您的移动布局不包括显示一组 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：查看代码片段时尝试更改视口宽度。

推荐阅读