如何限制多个图像的宽度以适应父 flexbox？

问题描述 投票：0回答：1

假设我有六张 200*200 图像作为 600px 宽度父元素中的 flex 项目

div
。我希望图像在不使用 flex-wrap 的情况下按比例调整大小并适合父级。

我尝试在每个

div
作品中添加
img
但是结构太长了。我发现另一种解决方案可以通过添加 
min-width: 0;
来正常工作，如下所示。我不明白它是如何工作的。有人可以解释一下吗？

HTML

  <div class="stack">
    <img class="test" src="http://picsum.photos/200/200" />
    <img class="test" src="http://picsum.photos/200/200" />
    <img class="test" src="http://picsum.photos/200/200" />
    <img class="test" src="http://picsum.photos/200/200" />
    <img class="test" src="http://picsum.photos/200/200" />
    <img class="test" src="http://picsum.photos/200/200" />
  </div>

CSS

.stack {
  display: flex;
  max-width: 600px;
  align-items: center;
  border:1px solid gold;
}

.stack img {
/* How "min-width" work in here? */
  min-width: 0;
  width:200px;
  align-self: center;
}

我希望 flex 项目的宽度 (

<img>
) 可以响应其父元素的宽度 
<div>
.

html css flexbox
1个回答
0
投票

尝试调整大小

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.responsive {
  max-width: 15%;
  height: auto;
}
</style>
</head>
<body>



<p>If you want an image to scale down if it has to, but never scale up to be larger than its original size, use max-width: 100%.</p>
<p>Resize the browser window to see the effect.</p>

<img src="img_nature.jpg" alt="Nature" class="responsive" width="200" height="200">
<img src="img_nature.jpg" alt="Nature" class="responsive" width="200" height="200">
<img src="img_nature.jpg" alt="Nature" class="responsive" width="200" height="200">
<img src="img_nature.jpg" alt="Nature" class="responsive" width="200" height="200">
<img src="img_nature.jpg" alt="Nature" class="responsive" width="200" height="200">
<img src="img_nature.jpg" alt="Nature" class="responsive" width="200" height="200">

</body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.