响应图像百分比

问题描述

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

使用媒体查询，具体取决于屏幕尺寸，我正在如下更改包含每个图像的div的宽度：

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

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

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

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

等。

但是这些图像在变大时看起来像是像素化的，它们的质量会松散...当它们从20％的宽度变为50％的宽度时，如何使它们不松散并且没有像素化？

我是否使用srcset技术？我该使用哪种响应式图像技术将图像缩放到任意大小而不会出现像素化？

解决方法

如果我理解正确，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>

,

如果您想保留图像的原始尺寸并使其具有响应性，可以使用很酷的方法！

->您可以使用弹性框。 （那是秘密）

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

下面的魔术是由CSS属性（称为flex-wrap）引起的：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>

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