Question

我目前正在尝试将图像放在一行中的flex容器中。我注意到图像“忽略”容器的宽度并溢出页面，除非您使用div包装每个图像标记或向图像添加min-width: 1%。

HTML：

<div class="container">
  <img src="[url]">
  <img src="[url]">
  <img src="[url]">
</div>

CSS，图片溢出页面：

.container {
  display: flex;
  flex-direction: row;
  height: 300px;
  margin-bottom: 20px;
}

.container img {
  flex: 1;
  object-fit: cover;
}

修复溢出问题：

.container img {
  flex: 1;
  min-width: 1%; /* width of images adjust to the parent container */
  object-fit: cover;
}

我只是想知道这是否是正常行为，或者我有一些导致此问题的CSS。

.container {
  display: flex;
  flex-direction: row;
  height: 300px;
  margin-bottom: 20px;
}

.container img {
  flex: 1;
  object-fit: cover;
}

.container.fix img {
  flex: 1;
  min-width: 1%;
  object-fit: cover;
}

<div class="container">
  <img src="https://cdn.pixabay.com/photo/2013/04/06/11/50/image-editing-101040_960_720.jpg" alt="">
  <img src="https://scontent.fmla3-1.fna.fbcdn.net/v/t1.0-9/12140762_1159067420823544_4471328164031495581_n.jpg?oh=e9255c0340cca64e7f51bb114bc25f9c&oe=5AC9097D" alt="">
  <img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider1.jpg" alt="">
</div>

<div class="container fix">
  <img src="https://cdn.pixabay.com/photo/2013/04/06/11/50/image-editing-101040_960_720.jpg" alt="">
  <img src="https://scontent.fmla3-1.fna.fbcdn.net/v/t1.0-9/12140762_1159067420823544_4471328164031495581_n.jpg?oh=e9255c0340cca64e7f51bb114bc25f9c&oe=5AC9097D" alt="">
  <img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider1.jpg" alt="">
</div>

Answer 1

.container {
  display: flex;
  flex-direction: row;
  height: 300px;
  margin-bottom: 0px;
}

.container img {
  flex: 2;
  object-fit: cover;
}

.container.fix img {
  flex: 2;
  min-width: 1%;
  object-fit: cover;
}

<div class="container">
  <img src="https://cdn.pixabay.com/photo/2013/04/06/11/50/image-editing-101040_960_720.jpg" alt="">
  <img src="https://scontent.fmla3-1.fna.fbcdn.net/v/t1.0-9/12140762_1159067420823544_4471328164031495581_n.jpg?oh=e9255c0340cca64e7f51bb114bc25f9c&oe=5AC9097D" alt="">
  <img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider1.jpg" alt="">
</div>

<div class="container fix">
  <img src="https://cdn.pixabay.com/photo/2013/04/06/11/50/image-editing-101040_960_720.jpg" alt="">
  <img src="https://scontent.fmla3-1.fna.fbcdn.net/v/t1.0-9/12140762_1159067420823544_4471328164031495581_n.jpg?oh=e9255c0340cca64e7f51bb114bc25f9c&oe=5AC9097D" alt="">
  <img src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider1.jpg" alt="">
</div>

图像标签未包含在Flex容器中而不使用div或设置宽度

1 个答案: