响应图像和百分比
我有一个有很多图像的布局，为了使我的布局具有响应性，我使用了宽度和高度的百分比值。每个图像都嵌套在一个div标记中，图像的宽度和高度都是其父图像的宽度和高度的100%。
使用媒体查询，根据屏幕大小，我更改了包含每个图像的div的宽度，如下所示：
当屏幕上只能容纳2个图像时:每个div包含一个图像，宽度为50%
当屏幕上只能容纳3张图片时:每个包含图片的div的宽度为33.33%
当屏幕上只能容纳4张图片时:每个div包含一张图片，宽度为25%
当屏幕上只能容纳5张图片时:每个div包含一张图片，宽度为20%
等等。
但当它们变大时，这些图像看起来像素化了，它们失去了质量...当它们从20%的宽度变为50%的宽度时，我如何使它们不松散质量和看起来不像素化？
我要使用srcset技术吗？我应该使用什么响应图像技术来让我的图像缩放到任何大小而不被像素化？
回答 2
Stack Overflow用户
发布于 2020-10-16 12:32:20
如果我理解正确的话，flex-grow将为你做这项工作。
当你有一个图像时，它会强制它为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>
Stack Overflow用户
发布于 2020-10-16 12:31:31
如果你想保留图像的原始大小并使其具有响应性，有一种cool方法可以做到这一点！
->你可以使用flexbox。(这就是秘诀)
运行下面的代码，并在全屏中打开代码。然后通过最小化屏幕来更改屏幕宽度，并使用flexbox观察图像的响应情况。
下面的魔术效果是由一个名为flex- wrap : wrap的CSS属性引起的；该属性将把所有图像包装在一个响应容器中！
你可以做这样的东西：
.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>
如果您调整图像的大小，它们将对齐并做出响应！
https://stackoverflow.com/questions/64382804
复制相似问题
腾讯云开发者
