使用“flex：shrink”无法正确调整图像大小
Posted
技术标签:
【中文标题】使用“flex：shrink”无法正确调整图像大小【英文标题】：Images not resizing properly with "flex: shrink" 【发布时间】：2021-11-09 07:35:37 【问题描述】：我在 flexbox 内创建了一个图像轮播，并为每个图像设置了 200 像素的宽度。我希望图像在缩小窗口时以相同的速度调整大小，所以我给它们每个 flex-shrink 值 1。
但是，正如您从 gif 中看到的那样，当我缩小窗口时，只有第二张图像会调整大小（其他图像保持相同的宽度）。我检查了原始文件的大小，发现第二张图片的宽度也最小（所以我认为这可能是导致问题的原因？）
但是，我不确定如何解决此问题。任何帮助将不胜感激。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>your page title goes here</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="container">
<h1>My Photo Gallery</h1>
<div class="gallery">
<figure>
<img src="img/dog1.jpeg" >
<figcaption>Example Photo</figcaption>
</figure>
<div class="slider">
<img src="img/dog2.jpeg" />
<img src="img/dog3.jpeg" />
<img src="img/dog4.jpeg" />
<img src="img/dog5.jpeg" />
</div>
</div>
</div>
</body>
</html>
CSS
*
margin: 0;
padding: 0;
body
background-color: rgb(46, 46, 46)
h1
font-family: helvetica;
color: white;
.container
padding: 30px 20px;
text-align: center;
max-width: 1000px;
min-width: 500px;
background-color: rgb(66, 66, 66);
margin: 0 auto;
figure
text-align: left;
figcaption
color: white;
img
width: 100%;
.gallery
display: flex;
flex-flow: column;
.slider
margin-top: 32px;
display: flex;
justify-content: space-between;
.slider img
display: block;
width: 200px;
max-height: 200px;
object-fit: cover;
flex-shrink: 1;
【问题讨论】：
你为什么不使用“height: auto;”滑块图像上的属性？ 【参考方案1】：在这种情况下，如果您不想添加任何额外的标记，只需将 .slider img 中的 width:200px; 替换为 min-width:200px;。
如果您想保持完全流畅的布局，可以将 min-width:200px; 替换为 min-width:25%。
正如我在my other answer 中提到的，如果您愿意为这些图像中的每一个添加一个容器，那么您将拥有更多的控制权，因为您可以使图像扩展以填充容器，而不管它的尺寸是多少.
【讨论】：
【参考方案2】：尝试使用媒体查询
示例：
@media(max-width:700px)
.slider img
width: 100px;
height: auto;
【讨论】：
以上是关于使用“flex：shrink”无法正确调整图像大小的主要内容，如果未能解决你的问题，请参考以下文章
当方向从横向更改为纵向时，UInavigationbar 背景图像无法正确调整大小
无法正确调整 .bmp 图像的大小（CS50 pset 4，调整大小，不太舒服）