时间戳

首页 > 解决方案 > 带有百分比的响应式图像

css - 带有百分比的响应式图像

问题描述

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

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

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

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

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

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

ETC..

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

我使用 srcset 技术吗？我使用什么响应式图像技术来允许我的图像缩放到任何大小而不会出现像素化？

标签： cssimageresponsive-designresponsive-imagessrcset

解决方案

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

推荐阅读