带有百分比的响应式图像

Question

我有一个包含大量图像的布局，为了使我的布局具有响应性，我使用百分比值作为宽度和高度。每个图像都嵌套在一个 div 标签中，并且图像的宽度和高度为其父级宽度和高度的 100%。

使用媒体查询，根据屏幕大小，我正在更改包含每个图像的 div 的宽度，如下所示：

当屏幕上只能容纳 2 张图片时：每个包含一张图片的 div 宽度为 50%

当屏幕上只能容纳 3 张图片时：每个包含图片的 div 的宽度为 33.33%

当屏幕上只能容纳 4 张图片时：每个包含图片的 div 宽度为 25%

当屏幕上只能容纳 5 张图片时：每个包含图片的 div 宽度为 20%

等等。

但是当这些图像变大时，它们看起来像素化了，质量变差了......当它们从 20% 的宽度变为 50% 的宽度时，我如何才能使它们的质量不变差并且看起来不像素化？

我是否使用 srcset 技术？我使用什么响应式图像技术来让我的图像缩放到任意大小而不会出现像素化？

Answer 1

如果我理解正确，flex-grow 将为您完成这项工作。

只要你有 1 张图片，它就会强制它为 100% 宽度，2 张图片为 50%，依此类推。当然，您不需要为此进行媒体查询，除非您想根据自己的意愿实现不同的布局。

这是codepen 上的示例，您可以尝试添加/删除图像以查看它的适合程度。

.flexbox .item { 
  flex-grow: 1; 
}

.flexbox {
  display: flex;  
  border: 2px solid #86835f;
  margin-bottom: 2em;
  max-width: 100%;
}


.item {
  box-sizing: border-box;  
  background: #86835f;  
  color: #ece69c;   
  margin: 0.25em;
}
img{
  max-width: 100%;
}

<div class="flexbox flexbox-grow-1">
  <div class="item ">
    <img src="https://fox26medford.com/wp-content/uploads/2020/04/AprilShoe-720x399-1.jpg" alt=""/>
  </div>
  <div class="item ">
<img src="https://fox26medford.com/wp-content/uploads/2020/04/AprilShoe-720x399-1.jpg" alt=""/>
  </div>    
  <div class="item ">
<img src="https://fox26medford.com/wp-content/uploads/2020/04/AprilShoe-720x399-1.jpg" alt=""/>
  </div>  
    <div class="item ">
<img src="https://fox26medford.com/wp-content/uploads/2020/04/AprilShoe-720x399-1.jpg" alt=""/>
  </div>  
      <div class="item ">
<img src="https://fox26medford.com/wp-content/uploads/2020/04/AprilShoe-720x399-1.jpg" alt=""/>
  </div>  
  
</div>

Answer 2

如果您想保留图像的原始尺寸并使其具有响应性，有一种酷方法可以做到这一点！

-> 你可以使用弹性盒子。 （这就是秘密）

运行下面的代码并全屏打开代码。然后通过最小化屏幕来更改屏幕宽度，并观察图像使用 flexbox 的响应速度。

下面的魔法是由一个称为 flex-wrap 的 CSS 属性引起的： wrap;这会将所有图像包装在一个响应式容器中！

你可以做这样的事情：-

.image {
  height: auto;
  width: 150px;
  margin: 10px;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

<div class="container">
   <img class="image" src="https://www.befunky.com/images/wp/wp-2014-08-milky-way-1023340_1280.jpg?auto=webp&format=jpg&width=1184" />
   <img class="image" src="https://www.befunky.com/images/wp/wp-2014-08-milky-way-1023340_1280.jpg?auto=webp&format=jpg&width=1184" />
   <img class="image" src="https://www.befunky.com/images/wp/wp-2014-08-milky-way-1023340_1280.jpg?auto=webp&format=jpg&width=1184" />
   <img class="image" src="https://www.befunky.com/images/wp/wp-2014-08-milky-way-1023340_1280.jpg?auto=webp&format=jpg&width=1184" />
   <img class="image" src="https://www.befunky.com/images/wp/wp-2014-08-milky-way-1023340_1280.jpg?auto=webp&format=jpg&width=1184" />
   <img class="image" src="https://www.befunky.com/images/wp/wp-2014-08-milky-way-1023340_1280.jpg?auto=webp&format=jpg&width=1184" />
</div>

如果您调整图像大小，它们将对齐并做出响应！