Css 制作一行适合flexbox的大图像

Css 制作一行适合flexbox的大图像,css,image,flexbox,Css,Image,Flexbox,.d1{ 背景:浅蓝色; 显示器:flex; 填充物:5px; } img{ 弹性:1; } 您需要调整容器中的内容。然后可以为图像设置弹性基准。我在这里使用了之间的空格,但任何一个都可以 .d1{ 显示器:flex; 边框:5px纯黑; 证明内容:之间的空间; } img{ 弹性:0.20%; 宽度:20%; } 摘自关于为什么图像在flexbox布局中不调整大小: 弹性项目的初始设置为“最小宽度:自动”。这意味着默认情况下,flex项不能收缩到其内容的大小以下 这意味着除非给定宽度,否则

.d1{
背景:浅蓝色;
显示器:flex;
填充物:5px;
}
img{
弹性:1;
}

您需要调整容器中的内容。然后可以为图像设置弹性基准。我在这里使用了之间的空格,但任何一个都可以

.d1{
显示器:flex;
边框:5px纯黑;
证明内容:之间的空间;
}
img{
弹性:0.20%;
宽度:20%;
}

摘自关于为什么图像在flexbox布局中不调整大小:

弹性项目的初始设置为“最小宽度:自动”。这意味着默认情况下,flex项不能收缩到其内容的大小以下

这意味着除非给定宽度,否则图像不会收缩。为了解决这个问题,您可以将图像包装在一个div中(该div将收缩以填充flex容器),然后将图像的宽度设置为100%

.d1{
背景:浅蓝色;
显示器:flex;
填充物:5px;
}
img{
显示:块;
宽度:100%;
}

根据您在问题区域中提供的描述,我们认为您需要一个全宽的容器和一个包含五幅全宽图像的水平滚动条

。滚动换行{边框:5px实心浅蓝色;宽度:100%;溢出:自动;}
.d1{显示:柔性;宽度:500%;}
.d1 img{宽度:20%;}


“一行中”与“适合当前屏幕的宽度”相矛盾-请更清楚地说明您试图实现的目标。适合屏幕的所有图像的总和,不换行:|您的代码片段不换行图像。这解释了图像不调整大小的原因:。尝试将它们包装在div中,并将图像的宽度设置为100%